React 全局状态管理-Redux
全局状态管理-Redux
01. 状态管理概述
目标：理解组件管理的局限性和全局状态管理的优势
1.1 组件状态管理
React 只是一个用于构建用户界面的库，专注于数据驱动 DOM 的领域，虽然也提供了状态管理的能力，但是对于复杂项目的状态管理依然吃力。
React 采用组件的方式进行状态的管理，当组件与组件的关系比较疏远时传递状态和更新状态变的异常复杂。
1.2 全局状态管理
Redux 是一个专业的面向 JavaScript 的状态管理工具，在使用了 Redux 以后状态可以被统一管理，不再完全依赖于组件。
状态被存储在 store 的对象中，所有组件直接在 store 对象中获取状态，所有组件通过统一的方式修改 store 对象中的状态。
当 store 对象中的状态被修改后，使用到了该状态的组件会自动更新。
全局状态管理解决了组件状态管理的弊端、避免了通过 props 的方式进行复杂的状态传递。
02. 状态管理 Redux
目标：掌握使用 Redux 管理状态的方式
npm install redux@4.2.02.1 概述
在使用 Redux 管理状态之前，我们必须先理解它的三个核心概念，因为只有了解了它的核心概念以后我们才能知道如何使用 Redux 管理状态。
状态管理包括在哪存储状态、如何存储状态、如何修改状态等。
| Action | Reducer | Store |
|---|---|---|
| 用于描述要做的事情是什么 | 用于做具体的事情并返回结果 | 用于存储状态、分配任务等 |
| 工作 | 员工 | 老板 |
应用状态被存储在 Store 对象中，视图若要修改状态需要通过 Action 描述要对状态做出什么样的操作并将 Action 指令发出，Action 发出后由 Reducer 接收，Reducer 根据 Action 的描述做具体的事情比如修改状态，状态操作完成后将最新状态存储到 store 对象中，store 中的状态更新后自动触发视图更新。
2.2 Action
Action 表示动作(名词)，用于描述要做什么事情，不做具体的事情只负责描述。对状态进行的任何操作都需要进行描述。
action 使用对象表示, 且对象中必须有 type 属性, 用于描述要做的事情是什么，type 属性的值为开发者自定义, 字符串类型。
// type 属性值的约定: domain/action 翻译过来就是 功能/动作
{ type: "功能/动作" }
{ type: "login/getCode" }
{ type: "profile/get" }在计数器案例中被记录的数值就是状态、让数值加一减一就是修改状态、加一的动作就是一个 action 对象、减一的动作又是另外一个 action 对象。
{ type: "counter/increment" } // +1
{ type: "counter/decrement" } // -1// 根据具体的功能, action 对象中可携带额外数据
{ type: "counter/increment", payload: 5 } // +5
{ type: "counter/decrement", payload: 5 } // -5在购物车案例中购物车列表就是状态、操作购物车列表就是操作状态、比如删除某件商品、更改要购买的商品数量等，每个动作都对应一个 action 对象。
{ type: "cart/list" } // 获取购物车列表数据
{ type: "cart/add", payload: { id: 1 }} // 将 id 为 1 的商品加入购物车
{ type: "cart/delete", payload: { id: 1 }} // 将 id 为 1 的商品从购物车中删除在 Todo 案例中，任务列表就是状态、操作任务列表就是操作状态，比如向任务列表中添加任务，从任务列表中删除任务，每个动作都对应一个 action 对象。
{ type: "todo/addTodo", payload: '吃饭' }
{ type: "todo/removeTodo", payload: {id: 1}}在可以进行登录和退出的应用中，登录和退出都会对应自己的 action，因为登录退出的操作也涉及到了状态。
{ type: "user/login", payload: { username: "", password: "" }}
{ type: "user/logout" }2.3 Action Creator
Action Creator 翻译过来就是创建 Action 对象的人，实际上指的就是一个返回 action 对象的函数。
const increment = () => ({ type: "counter/increment" })为什么要通过函数返回 Action 对象呢？
// 通过函数返回 Action 对象的目的是减少重复代码
// 在应用程序中大概率会存在一个 Action 对象在多处使用又需要携带不同的额外数据, 代码重复率高, 比如下面这样
// type 属性及 type 属性的值被重复写了多次, payload 属性也被重复写了多次, 只有 payload 值每次都不一样
{ type: "counter/increment", payload: 5 }
{ type: "counter/increment", payload: 10 }
{ type: "counter/increment", payload: 15 }在使用 Action Creator 函数时额外的数据通过函数参数的方式传递到 Action 对象。
const increment = (payload) => ({ type: "counter/increment", payload });increment(5) // { type: "counter/increment", payload: 5 }
increment(10) // { type: "counter/increment", payload: 10 }
increment(15) // { type: "counter/increment", payload: 15 }2.4 Reducer
Reducer 就是一个函数，通过参数接收上一次的状态以及 Action 指令，根据 Action 指令操作状态并更新状态。
// prevState: 上一次操作返回的状态
// action: action 对象, 描述当前要对状态进行什么样的操作
function reducer(prevState, action) {
// 在 reducer 函数中根据 action 对象的 type 属性值决定如何操作状态
// 在 reducer 函数中返回状态就是在更新状态
return newState;
}// 状态的初始值
const initialState = { count: 0 };
function reducer(state = initialState, action) {
switch (action.type) {
case "counter/increment":
return { count: state.count + 1 };
case "counter/decrement":
return { count: state.count - 1 };
// reducer 函数是一定要有返回值的
// 如果当前 reducer 被调用后没有匹配到要执行的操作, 比如 action 对象的 type 属性值为 "count/nothing"
// 那就直接返回 state, 将 state 作为当前的最新状态
default:
return state;
}
}// 在 action 对象有额外数据的时候, 可以在 reducer 函数中通过 action 对象直接获取
function reducer(state = initialState, action) {
switch (action.type) {
case "counter/increment":
return { count: state.count + action.payload };
case "counter/decrement":
return { count: state.count - action.payload };
default:
return state;
}
}在 reducer 函数中不能直接修改 state 状态，在修改更改状态时要先对状态进行拷贝、在拷贝状态的基础上进行修改，再返回修改后的拷贝状态。
// 错误示范
function reducer(state = initialState, action) {
switch (action.type) {
case "counter/increment":
state.count = state.count + 1;
return state;
}
}注意：Reducer 函数被设计为纯函数，函数中不能包含副作用代码，即在 Reducer 函数中不能做和状态不相关的事情，比如异步操作(发送请求、定时器等)、获取或修改DOM 对象、在控制台输出数据等，和处理状态不相关的事情都属于副作用代码。
2.5 Store
① Store 表示仓库，是 Redux 中用于存储状态的地方并提供了获取状态 API。一个应用只能有一个 store 对象。
// 从 redux 中导入用于创建 store 对象的方法
import { createStore } from "redux";
// 创建 store 对象, 接收 reducer 函数作为参数
// 在创建 store 对象时 createStore 方法内部会调用 reducer 函数, reducer 函数调用后返回状态
// createStore 方法获取到状态后将状态存储在了 store 对象中, 并将 store 对象进行返回
// 也就是说 reducer 函数初始时会被调用一次
const store = createStore(reducer);
// 获取仓库中存储的状态
console.log(store.getState());② Store 还用于整合 Action 对象和 Reducer 函数。
当我们要做具体事情的时候，需要通过 store 对象提供的 dispatch 方法发出 Action 指令。
// 当 store.dispatch 方法被调用后，dispatch 方法会继续调用 reducer 函数
// 并将收到的 Action 对象传递给 reducer 函数
// 由 reducer 函数匹配 action 对象, 根据 action 对象 type 属性值决定对状态进行怎样的操作
// 状态操作完成后, reducer 通过返回值的方式对 store 对象中存储的状态进行更新
// 至此, Action 对象和 Reducer 函数整合完毕, 整体的 redux 工作流程就走通了
// 也就是说, reducer 函数不仅在创建 store 对象时被调用, 调用 dispatch 方法后 reducer 函数也会被调用
store.dispatch({ type: "counter/increment", payload: 5 });
// 获取仓库中存储的状态
console.log(store.getState());// store.dispatch 方法通常会接收 action creator 函数的调用
// action creator 函数调用后返回 action 对象, 没有任何问题
const decrement = (payload) => ({ type: "counter/decrement", payload });
store.dispatch(decrement(10));
console.log(store.getState());③ dispatch 方法有返回值，返回值是 dispatch 方法被调用时接收的 action 对象。
store.dispatch(increment(5)); // { type: "counter/increment", payload: 5 }
store.dispatch(decrement(10)); // { type: "counter/decrement", payload: 10 }④ store 对象中还提供了监听状态变化的方法，通过该方法可以指定当状态发生变化以后要做的事情。
// 订阅 store 对象中状态的变化, 当状态变化以后执行传递到 subscribe 方法中的回调函数
store.subscribe(() => {
console.log(store.getState());
});// subscribe 方法调用后会返回取消订阅的方法
const unsubscribe = store.subscribe();
// 当取消订阅的方法被调用后不再执行传递到该 subscribe 方法中的回调函数
unsubscribe();⑤ Redux 是怎样获取到状态的初始值的?
在创建 store 对象时 createStore 方法接收了 reducer 函数作为参数，reducer 函数会被初始调用一次，目的就是获取状态初始值。
在初始调用 reducer 函数之前，Redux 会先创建一个具有随机 type 属性值的 action 对象，然后 redux 调用了 dispatch 方法发出该 action 对象，此时 reducer 函数被调用，reducer 函数的第一个参数传递的是 undefined，第二个参数传递的就是那个随机生成的 action 对象。第一个参数为 undefined 相当于没有传递，就是占个位置，所以此时我们为 state 设置的默认参数就生效了。在 reducer 函数执行时函数内部不可能通过 switch 匹配到该随机生成的 action 对象， reducer 函数内部的代码一定会走 default 语句，通过 default 语句下的代码 redux 就拿到了状态的默认值。
reducer(undefined, {type: '@@redux/INITv.1.y.p.a'})
reducer(undefined, {type: '@@redux/INITt.q.f.r.z.r'})
reducer(undefined, {type: '@@redux/INITs.x.1.a.z.d'})
reducer(undefined, {type: '@@redux/INITg.q.u.q.l.o'})const initialState = { count: 0 };
function reducer(state = initialState, action) {
switch (action.type) {
// ...
default:
return state;
}
}03. React Redux
目标：理解 React Redux 的作用、掌握 Reac Redux 的使用方式
3.1 概述
(1) 在 React 中直接使用 Redux 存在的问题
Redux 本身是一个独立的库，可以和任何UI层一起使用，它只负责状态的管理，而 React 是一个响应式的构建用户界面的库，要求状态变化组件自动更新。
但是在 React 组件中直接通过 getState 方法获取状态渲染用户界面，那么当 Redux 状态发生变化以后组件是不会自动更新的，这就是问题所在。
// 订阅状态的变化并输出到控制台中
store.subscribe(() => console.log(store.getState()));
class App extends React.Component {
render() {
// 获取 redux 状态
const state = store.getState();
// 点击按钮更新状态
return (
<button onClick={() => store.dispatch({ type: "count/increment", payload: 5 })}>
{/* 渲染 Redux 状态 */}
{state.count}
</button>
);
}
}(2) React Redux 解决了什么问题
React Redux 将状态的变化与视图的更新进行了绑定，即 Redux 状态变化会驱动 React 组件自动更新。
React Redux 将状态存储在了 React 提供的 Context 上下文对象中，Context 状态发生变化会驱动组件视图的更新，这是 React 提供的组件更新机制。
React Redux 还提供了辅助方法让开发者更容易的从 Context 对象中获取 Redux 状态。
(3) 总结一下
React 负责根据状态渲染用户界面、Redux 负责管理状态、React Redux 负责建立组件与状态之间的联系。
3.2 基本使用
npm install react-redux@8.0.2(1) 将 Redux 状态存储在 Context 上下文对象中
// 导入 Provider 组件
// 用于管理 context 上下文状态的对象 react redux 已经创建好了
// 它将 context 对象返回的 Provider 组件暴露出来
// 让开发者通过 Provider 组件存储 redux 状态
import { Provider } from "react-redux";
root.render(
<Provider store={store}>
<App />
</Provider>
);(2) 在组件中获取 redux 状态
import { connect } from "react-redux";
class App extends React.Component {
render() {
return <button>{this.props.count}</button>;
}
}
// connect 方法的第一个参数是一个回调函数, 我们一般将它命名为 mapStateToProps
// 意思就是将 redux 中的指定状态映射到组件的 props 对象中
// connect 方法内部在调用该回调函数时将 redux 状态对象作为该回调函数的参数传递给了开发者
// 开发者要做的事情就是通过回调函数的返回值告诉 connect 方法要将 redux 中的哪些状态传递到组件中, 回调函数的返回值要求是对象类型
// 接下来 connect 方法通过回调函数的返回值拿到要映射的状态, 然后将状态通过 props 的方式传递到了组件中
// 这样开发者在组件中就可以通过 this.props 获取到指定的 redux 状态了
const mapStateToProps = (state) => ({ count: state.count });
// connect()() 返回了一个组件, 该组件需要被默认导出, 也就是在当前文件中原本要导出 App 组件, 现在要导出 connect()() 返回的组件
// connect()() 返回的组件被 main.js 导入, 被当做 App 调用, 它帮助真正的 App 接收普通 props 并将普通 props 再传递给 App 组件
export default connect(mapStateToProps)(App);(3) 在 React 组件中修改 Redux 状态
const increment = (payload) => ({ type: "count/increment", payload });
const decrement = (payload) => ({ type: "count/decrement", payload });
class App extends React.Component {
render() {
// connect 方法在调用后会将 dispatch 方法传递到开发者组件
// 开发者可以通过 this.props.dispatch 的方式获取该方法
return (
<>
<button onClick={() => this.props.dispatch(increment(5))}>{this.props.count}</button>
<button onClick={() => this.props.dispatch(decrement(5))}>{this.props.count}</button>
</>
);
}
}(4) connect 方法的的第二个参数 mapDispatchToProps
通过 mapDispatchToProps 参数可以将触发 Action 指令的代码从组件中进行抽离。
class App extends React.Component {
const { increment, decrement, count } = this.props;
render() {
return (
<>
<button onClick={() => increment(5)}>{count}</button>
<button onClick={() => decrement(5)}>{count}</button>
</>
);
}
}
const mapDispatchToProps = (dispatch) => ({
increment: (count) => dispatch(increment(count)),
decrement: (count) => dispatch(decrement(count))
})
export default connect(mapStateToProps, mapDispatchToProps)(App)注意：当 connect 方法接受第二个参数 mapDispatchToProps 以后，组件的 props 对象中将不会再有 dispatch 方法。
(5) mapDispatchToProps 和 mapDispatchToProps 方法的第二个参数
const mapStateToProps = (state, ownProps) => ({ count: state.count + ownProps.num });
const mapDispatchToProps = (state, ownProps) => ({ increment: (count) => dispatch(increment(count + ownProps.num)) })(6) connect 方法是如何实现的？
// connect 方法是如何实现的?
// connect 方法的返回值是一个函数, 该函数接收一个参数, 就是要接收 redux 状态的开发者组件
// 这个函数内部返回了一个 React 组件, 在该 React 组件中的 render 函数中渲染了开发者组件
// 渲染开发者组件时通过 props 的方式将 redux 状态传递到了组件内部
// 这个函数返回的组件还有一个作用, 它充当开发者组件的替身被外部调用
// 帮助开发者组件接收 props, 将接收到的 props 再传递给开发者组件
// 也就是说, 在 main.js 文件中导入的 App 组件实际上是 WrappedComponent 组件
// 调用 WrappedComponent 后它又调用真正的 App 组件, 此时它将普通的 props 和 redux 状态一并通过 props 的方式传递到了开发者组件
// 模拟 connect 方法
function connect(mapStateToProps) {
const store = { count: 0, a: 1 };
const state = mapStateToProps(store);
return function (Component) {
return class WrappedComponent extends React.Component {
render() {
return <Component {...state} {...this.props}/>;
}
};
};
}3.3 代码拆分
为了使应用结构清晰，在实际项目中我们会按照功能职责对 Redux 代码进行拆分。
// src/store/reducers/counter.js
const initialState = { count: 0 };
export default function counterReducer(state = initialState, action) {
switch (action.type) {
case "count/increment":
return { count: state.count + action.payload };
case "count/decrement":
return { count: state.count - action.payload };
default:
return state;
}
}// src/store/action_creators/counter.js
export const increment = (payload) => ({ type: "count/increment", payload });
export const decrement = (payload) => ({ type: "count/decrement", payload });// src/store/index.js
import { createStore } from "redux";
import counterReducer from "./reducers/counter";
export const store = createStore(counterReducer);// src/index.js
import { store } from "./store";
root.render(
<Provider store={store}>
<App />
</Provider>
);// src/App.js
import { increment, decrement } from "./store/action_creators/counter";3.4 ActionType
目标：将 Action 对象的 type 属性值声明为常量防止因字符串书写错误导致 Action 指令不能被正确匹配
在 Redux 的工作流程中，定义 Action 对象需要指定 type 属性值，定义 Reducer 函数需要指定 type 属性值，type 属性的值为字符串类型，在编写字符串时编辑器没有代码提示所以极易产生字符编写错误，当 Action 对象的 type 属性值编写错误后，导致的结果仅仅是 Reducer 函数不能正确匹配到 Action 指令，程序整体并不会报错，这样对于开发者来说排错就变得复杂。
所以为了避免 Action 对象的 type 属性值书写错误，我们要将 Action 对象 type 属性的值声明为常量，一个 Action 对象的 type 属性值只声明一次，然后分别在 Action 对象中和 Reducer 函数中使用，而且对于常量来说，编辑器是有提示的，这样就最大程度的避免了 Action 对象的 type 属性值书写错误导致 Action 指令不能被正确匹配的问题。
// src/store/action_types/counter.js
export const INCREMENT = "counter/increment";
export const DECREMENT = "counter/decrement";// src/store/actions/counter.js
import * as types from "../action_types/counter";
export const increment = (payload) => ({ type: types.INCREMENT, payload });
export const decrement = (payload) => ({ type: types.DECREMENT, payload });// src/store/reducers/counter.js
import * as types from "../action_types/counter";
const initialState = { count: 0 };
export default function counterReducer(state = initialState, action) {
switch (action.type) {
case types.INCREMENT:
return { count: state.count + action.payload };
case types.DECREMENT:
return { count: state.count - action.payload };
default:
return state;
}
}3.5 Reducer 拆分
目标：掌握在项目中拆分合并 Reducer 函数的意义和方法
在一个完整的 React 应用中通常会有很多状态需要管理，比如用户状态、订单状态、商品状态等。
如果仅在一个 Reducer 函数中管理应用中的所有状态，那么 Reducer 函数将会变的不易维护。
所以我们会按照功能对 Reducer 函数进行拆分，使用特定的 Reducer 函数管理特定功能的状态更新。
又由于 createStore 方法只能接收一个 Reducer 函数，所以最终我们还要对 Reducer 进行合并，将合并之后的 Reducer 函数传递给 createStore 方法。
// src/store/reducers/todos.js
const initialState = [];
export default function todosReducer(state = initialState) {
return state;
}// src/store/reducers/index.js
import { combineReducers } from "redux";
import counterReducer from "./counter";
import todosReducer from "./todos";
// { counter: { count: 0 }, todos: [] };
const rootReducer = combineReducers({
counter: counterReducer,
todos: todosReducer,
});
export default rootReducer;// src/store/index.js
import rootReducer from "./reducers";
export const store = createStore(rootReducer);
// 测试: 在控制台输出当前的状态
console.log(store.getState());// src/App.js
const mapStateToProps = (state) => ({ count: state.counter.count });04. 综合案例-购物车
4.1 概述
create-react-app cart
npm install prettier@2.7.1
npm i mdb-ui-kit@5.0.0 @fortawesome/fontawesome-free@6.2.0 redux@4.2.0 react-redux@8.0.2import "mdb-ui-kit/css/mdb.min.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import { Component } from "react";
export default class App extends Component {
render() {
return (
<div className="container py-5">
<div className="row">
<div className="col-md-8">
<div className="card mb-4">
<div className="card-header py-3">
<h5 className="mb-0">购物车 - 共 2 件商品</h5>
</div>
<div className="card-body">
{/* 单个商品 */}
<div className="row">
<div className="col-lg-3 col-md-12 mb-4 mb-lg-0">
{/* 商品图片 */}
<div
className="bg-image hover-overlay hover-zoom ripple rounded"
data-mdb-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
className="w-100"
alt="Blue Jeans Jacket"
/>
</div>
{/* 商品图片 */}
</div>
<div className="col-lg-5 col-md-6 mb-4 mb-lg-0">
{/* 商品信息 */}
<p>
<strong>蓝色牛仔衬衫</strong>
</p>
<p>颜色: 蓝色</p>
<p>尺码: M</p>
<button
type="button"
className="btn btn-primary btn-sm me-1 mb-2"
data-mdb-toggle="tooltip"
title="Remove item"
>
<i className="fas fa-trash" />
</button>
<button
type="button"
className="btn btn-danger btn-sm mb-2"
data-mdb-toggle="tooltip"
title="Move to the wish list"
>
<i className="fas fa-heart" />
</button>
{/* 商品信息 */}
</div>
<div className="col-lg-4 col-md-6 mb-4 mb-lg-0">
{/* 商品数量 */}
<div className="d-flex mb-4" style={{ maxWidth: 300 }}>
<button className="btn btn-primary px-3 me-2">
<i className="fas fa-minus" />
</button>
<div className="form-outline">
<input
min={0}
defaultValue={1}
type="number"
readOnly
className="form-control"
/>
</div>
<button className="btn btn-primary px-3 ms-2">
<i className="fas fa-plus" />
</button>
</div>
{/* 商品数量 */}
{/* 商品价格 */}
<p className="text-start text-md-center">
<strong>¥17.99</strong>
</p>
{/* 商品价格 */}
</div>
</div>
{/* 单个商品 */}
<hr className="my-4" />
{/* 单个商品 */}
<div className="row">
<div className="col-lg-3 col-md-12 mb-4 mb-lg-0">
{/* 商品图片 */}
<div
className="bg-image hover-overlay hover-zoom ripple rounded"
data-mdb-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/13a.webp"
className="w-100"
alt=""
/>
</div>
{/* 商品图片 */}
</div>
<div className="col-lg-5 col-md-6 mb-4 mb-lg-0">
{/* 商品信息 */}
<p>
<strong>红色连帽衫</strong>
</p>
<p>颜色: 红色</p>
<p>尺码: M</p>
<button
type="button"
className="btn btn-primary btn-sm me-1 mb-2"
data-mdb-toggle="tooltip"
title="Remove item"
>
<i className="fas fa-trash" />
</button>
<button
type="button"
className="btn btn-danger btn-sm mb-2"
data-mdb-toggle="tooltip"
title="Move to the wish list"
>
<i className="fas fa-heart" />
</button>
{/* 商品信息 */}
</div>
<div className="col-lg-4 col-md-6 mb-4 mb-lg-0">
{/* 商品数量 */}
<div className="d-flex mb-4" style={{ maxWidth: 300 }}>
<button className="btn btn-primary px-3 me-2">
<i className="fas fa-minus" />
</button>
<div className="form-outline">
<input
min={0}
name="quantity"
defaultValue={1}
type="number"
className="form-control"
/>
</div>
<button className="btn btn-primary px-3 ms-2">
<i className="fas fa-plus" />
</button>
</div>
{/* 商品数量 */}
{/* 商品价格 */}
<p className="text-start text-md-center">
<strong>¥17.99</strong>
</p>
{/* 商品价格 */}
</div>
</div>
{/* 单个商品 */}
</div>
</div>
</div>
<div className="col-md-4">
{/* 结算信息 */}
<div className="card mb-3">
<div className="card-header py-3">
<h5 className="mb-0">结算信息</h5>
</div>
<div className="card-body">
<ul className="list-group list-group-flush">
<li className="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
<div>
<strong>总价</strong>
</div>
<span>
<strong>¥53.98</strong>
</span>
</li>
</ul>
<button
type="button"
className="btn btn-primary btn-lg btn-block"
>
去结算
</button>
</div>
</div>
{/* 结算信息 */}
</div>
</div>
{/* 心愿单 */}
<div className="card">
<div className="card-header py-3">
<h5 className="mb-0">心愿单</h5>
</div>
<div className="card-body">
<table className="table">
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>颜色</th>
<th>尺码</th>
</tr>
</thead>
<tbody>
<tr>
<th>蓝色牛仔衬衫</th>
<td>¥17.99</td>
<td>蓝色</td>
<td>M</td>
</tr>
<tr>
<td>红色连帽衫</td>
<td>¥17.99</td>
<td>红色</td>
<td>M</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* 心愿单 */}
</div>
);
}
}// src/response.json
[
{
"id": 1,
"title": "纯色衬衫男 商务正装舒适棉质休闲长袖男士白衬衣",
"picture": "https://img14.360buyimg.com/n7/jfs/t1/208150/35/21551/335628/626141a4E8ddb4cfd/c1f2e30411d92a15.jpg",
"price": 76.0,
"count": 1,
"size": "M",
"color": "白色"
},
{
"id": 2,
"title": "南极人衬衫男 纯色长袖商务衬衫男士棉质舒适透气外套修身西装白衬衫",
"picture": "https://img10.360buyimg.com/n7/jfs/t1/90875/17/22666/281680/62bd52b7E9c0d6c90/be0e8da09a8efb1b.jpg",
"price": 79.0,
"count": 1,
"size": "3XL",
"color": "黑色"
},
{
"id": 3,
"title": "杉杉(FIRS)长袖衬衫男2022春秋季中青年商务休闲格子衬衣男",
"picture": "https://img14.360buyimg.com/n7/jfs/t1/20408/37/15952/488606/627ca8ceE04fceb5a/674eaf08b08a9fd2.jpg",
"price": 142.0,
"count": 2,
"size": "2XL",
"color": "蓝色"
},
{
"id": 4,
"title": "花花公子(PLAYBOY)长袖衬衫男秋季男士衬衣男条纹商务休闲潮牌绅士男装职业正装外套",
"picture": "https://img12.360buyimg.com/n7/jfs/t1/82656/6/21669/152645/6301a1c7E8ebac0ad/a4ca62b264a25c05.jpg",
"price": 158.0,
"count": 4,
"size": "XL",
"color": "白色"
}
]4.2 拆分组件
// 购物车商品组件: src/components/CartItem.js
import React, { Component } from "react";
export default class CartItem extends Component {
render() {
return (
<div className="row">
<div className="col-lg-3 col-md-12 mb-4 mb-lg-0">
{/* 商品图片 */}
<div
className="bg-image hover-overlay hover-zoom ripple rounded"
data-mdb-ripple-color="light"
>
<img
src="https://mdbcdn.b-cdn.net/img/Photos/Horizontal/E-commerce/Vertical/12a.webp"
className="w-100"
alt="Blue Jeans Jacket"
/>
</div>
{/* 商品图片 */}
</div>
<div className="col-lg-5 col-md-6 mb-4 mb-lg-0">
{/* 商品信息 */}
<p>
<strong>蓝色牛仔衬衫</strong>
</p>
<p>颜色: 蓝色</p>
<p>尺码: M</p>
<button
type="button"
className="btn btn-primary btn-sm me-1 mb-2"
data-mdb-toggle="tooltip"
title="Remove item"
>
<i className="fas fa-trash" />
</button>
<button
type="button"
className="btn btn-danger btn-sm mb-2"
data-mdb-toggle="tooltip"
title="Move to the wish list"
>
<i className="fas fa-heart" />
</button>
{/* 商品信息 */}
</div>
<div className="col-lg-4 col-md-6 mb-4 mb-lg-0">
{/* 商品数量 */}
<div className="d-flex mb-4" style={{ maxWidth: 300 }}>
<button className="btn btn-primary px-3 me-2">
<i className="fas fa-minus" />
</button>
<div className="form-outline">
<input
min={0}
defaultValue={1}
type="number"
readOnly
className="form-control"
/>
</div>
<button className="btn btn-primary px-3 ms-2">
<i className="fas fa-plus" />
</button>
</div>
{/* 商品数量 */}
{/* 商品价格 */}
<p className="text-start text-md-center">
<strong>¥17.99</strong>
</p>
{/* 商品价格 */}
</div>
</div>
);
}
}// 购物车结算信息组件: src/components/Summary.js
import React, { Component } from "react";
export default class Summary extends Component {
render() {
return (
<div className="card mb-3">
<div className="card-header py-3">
<h5 className="mb-0">结算信息</h5>
</div>
<div className="card-body">
<ul className="list-group list-group-flush">
<li className="list-group-item d-flex justify-content-between align-items-center border-0 px-0 mb-3">
<div>
<strong>总价</strong>
</div>
<span>
<strong>¥53.98</strong>
</span>
</li>
</ul>
<button type="button" className="btn btn-primary btn-lg btn-block">
去结算
</button>
</div>
</div>
);
}
}// 心愿单组件: src/components/Wish.js
import React, { Component } from "react";
export default class Wish extends Component {
render() {
return (
<div className="card">
<div className="card-header py-3">
<h5 className="mb-0">心愿单</h5>
</div>
<div className="card-body">
<table className="table">
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>颜色</th>
<th>尺码</th>
</tr>
</thead>
<tbody>
<tr>
<th>蓝色牛仔衬衫</th>
<td>¥17.99</td>
<td>蓝色</td>
<td>M</td>
</tr>
<tr>
<td>红色连帽衫</td>
<td>¥17.99</td>
<td>红色</td>
<td>M</td>
</tr>
</tbody>
</table>
</div>
</div>
);
}
}// 购物车组件: src/components/Cart.js
import React, { Component } from "react";
import Summary from "./Summary";
import Wish from "./Wish";
import CartItem from "./CartItem";
export default class Cart extends Component {
render() {
return (
<div className="container py-5">
<div className="row">
<div className="col-md-8">
<div className="card mb-4">
<div className="card-header py-3">
<h5 className="mb-0">购物车 - 共 2 件商品</h5>
</div>
<div className="card-body">
{/* 单个商品 */}
<CartItem />
{/* 单个商品 */}
<hr className="my-4" />
</div>
</div>
</div>
<div className="col-md-4">
{/* 结算信息 */}
<Summary />
{/* 结算信息 */}
</div>
</div>
{/* 心愿单 */}
<Wish />
{/* 心愿单 */}
</div>
);
}
}// 根组件: src/App.js
import "mdb-ui-kit/css/mdb.min.css";
import "@fortawesome/fontawesome-free/css/all.min.css";
import { Component } from "react";
import Cart from "./components/Cart";
export default class App extends Component {
render() {
return <Cart />;
}
}4.3 配置 Redux
① 创建 cartReducer、wishReducer、rootReducer
// src/store/reducers/cartReducer.js
const initialState = {};
export default function cartReducer(state = initialState, action) {
switch (action.type) {
default:
return state;
}
}// src/store/reducers/wishReducer.js
const initialState = {};
export default function wishReducer(state = initialState, action) {
switch (action.type) {
default:
return state;
}
}// src/store/reducers/index.js
import { combineReducers } from "redux";
import cartReducer from "./cartReducer";
import wishReducer from "./wishReducer";
export const rootReducer = combineReducers({
cartReducer,
wishReducer,
});② 创建 store 对象
// src/store/index.js
import { createStore } from "redux";
import { rootReducer } from "./reducers/rootReducer";
export const store = createStore(rootReducer);③ 配置 store 对象
// src/index.js
import { Provider } from "react-redux";
import { store } from "./store";
root.render(
<Provider store={store}>
<App />
</Provider>
);4.4 保存购物车列表
目标：将保存购物车列表状态保存到 store 对象中
① 创建用于实现保存购物车功能的 action type
// src/store/types/cartTypes.js
export const SAVE_CART = "购物车/保存购物车列表";② 创建用于实现保存购物车功能的 action creator
// src/store/creators/cartCreators.js
import * as cartTypes from "../types/cartTypes";
// 保存购物车状态
export const saveCartCreator = (cart) => ({
type: cartTypes.SAVE_CART,
payload: { cart },
});③ 创建用于实现保存购物车功能的 reducer
// src/store/reducers/cartReducer.js
import * as cartTypes from "../types/cartTypes";
const initialState = {
cart: [],
};
export default function cartReducer(state = initialState, action) {
switch (action.type) {
// 保存购物车列表
case cartTypes.SAVE_CART:
return {
...state,
cart: action.payload.cart,
};
}
}④ 购物车组件挂载完成后保存购物车状态
// src/components/Cart.js
import cart from "../response.json";
import { connect } from "react-redux";
import { saveCartCreator } from "../store/creators/cartCreators";
class Cart extends Component {
// 组件挂载完成之后
componentDidMount() {
// 将购物车列表数据存储在 store 对象中 (模拟网络请求之后的保存状态操作)
this.props.dispatch(saveCartCreator(cart));
}
}
// 将 dispatch 方法映射到组件的 props 对象中
export default connect()(Cart);4.5 渲染购物车列表
目标：从 store 中获取购物车状态并渲染购物车列表
① 从 store 对象中获取购物车列表状态并渲染购物车组件
// src/components/Cart.js
class Cart extends Component {
render() {
// 获取购物车列表状态
const cart = this.props.cart;
// 渲染 CartItem 组件
return (
<>
<h5 className="mb-0">购物车 - 共 {cart.length} 件商品</h5>
<div className="card-body">
{/* 单个商品 */}
{cart.map((item, index) => {
return index !== cart.length - 1 ? (
<React.Fragment key={item.id}>
<CartItem goods={item} />
<hr className="my-4" />
</React.Fragment>
) : (
<CartItem key={item.id} goods={item} />
);
})}
{/* 单个商品 */}
</div>
</>
);
}
}
// 从 store 对象中获取购物车列表状态
const mapStateToProps = (state) => ({ cart: state.cartReducer.cart });
// 将购物车列表状态映射到组件的 props 对象中
export default connect(mapStateToProps)(Cart);② 渲染购物车中的商品状态
// src/components/CartItem.js
export default class CartItem extends Component {
render() {
// 获取购物车商品
const goods = this.props.goods;
return (
<div className="row">
<div className="col-lg-3 col-md-12 mb-4 mb-lg-0">
{/* 商品图片 */}
<div
className="bg-image hover-overlay hover-zoom ripple rounded"
data-mdb-ripple-color="light"
>
<img src={goods.picture} className="w-100" alt={goods.title} />
</div>
{/* 商品图片 */}
</div>
<div className="col-lg-5 col-md-6 mb-4 mb-lg-0">
{/* 商品信息 */}
<p>
<strong>{goods.title}</strong>
</p>
<p>颜色: {goods.color}</p>
<p>尺码: {goods.size}</p>
<button
type="button"
className="btn btn-primary btn-sm me-1 mb-2"
data-mdb-toggle="tooltip"
title="Remove item"
>
<i className="fas fa-trash" />
</button>
<button
type="button"
className="btn btn-danger btn-sm mb-2"
data-mdb-toggle="tooltip"
title="Move to the wish list"
>
<i className="fas fa-heart" />
</button>
{/* 商品信息 */}
</div>
<div className="col-lg-4 col-md-6 mb-4 mb-lg-0">
{/* 商品数量 */}
<div className="d-flex mb-4" style={{ maxWidth: 300 }}>
<button className="btn btn-primary px-3 me-2">
<i className="fas fa-minus" />
</button>
<div className="form-outline">
<input
min={0}
defaultValue={goods.count}
type="number"
className="form-control"
/>
</div>
<button className="btn btn-primary px-3 ms-2">
<i className="fas fa-plus" />
</button>
</div>
{/* 商品数量 */}
{/* 商品价格 */}
<p className="text-start text-md-center">
<strong>¥{goods.price * goods.count}</strong>
</p>
{/* 商品价格 */}
</div>
</div>
);
}
}4.6 更新商品数量
目标：当用户点击更改商品数量的按钮时实现商品数量更改功能
- 创建用于实现更改商品数量的 action type、action creator
- 在 cartReducer 中实现更改商品数量的逻辑
- 在 CartItem 组件中发出更改商品数量的指令
① 创建用于实现更改商品数量功能的 action type、action creator
// src/store/types/cartTypes.js
export const UPDATE_COUNT = "购物车/更改商品数量";// src/store/creators/cartCreators.js
// 修改购物车中的商品数量
export const updateCountCreator = ({ id, count }) => ({
type: cartTypes.UPDATE_COUNT,
payload: { id, count },
});② 在 cartReducer 中实现更改商品数量的逻辑
// src/store/reducers/cartReducer.js
export default function cartReducer(state = initialState, action) {
switch (action.type) {
// 更新商品数量
case cartTypes.UPDATE_COUNT:
return {
...state,
cart: state.cart.map((item) =>
item.id === action.payload.id
? { ...item, count: action.payload.count }
: item
),
};
}
}③ 在 CartItem 组件中发出更改商品数量的指令
// src/components/CartItem.js
import { updateCount } from "../store/action_creators/cart";
import { connect } from "react-redux";
class CartItem extends Component {
render() {
// 获取 dispatch 方法
const dispatch = this.props.dispatch;
return (
<div className="d-flex mb-4">
<button
onClick={() =>
this.props.dispatch(
updateCountCreator({ id: goods.id, count: goods.count - 1 })
)
}
className="btn btn-primary px-3 me-2"
>
<i className="fas fa-minus" />
</button>
<div className="form-outline">
<input value={goods.count} readOnly />
</div>
<button
onClick={() =>
this.props.dispatch(
updateCountCreator({ id: goods.id, count: goods.count + 1 })
)
}
className="btn btn-primary px-3 ms-2"
>
<i className="fas fa-plus" />
</button>
</div>
);
}
}
export default connect()(CartItem);4.7 删除商品
目标：当用户点击删除商品按钮时实现删除商品功能
- 创建用于实现删除商品的 action type、action creator
- 在 cartReducer 中实现删除商品的逻辑
- 在 CartItem 组件中发出删除商品的指令
① 创建用于实现删除商品的 action type、action creator
// src/store/types/cartTypes.js
export const REMOVE_GOODS = "购物车/删除购物车商品";// src/store/creators/cartCreators.js
// 删除购物车中的商品
export const removeGoodsCreator = (id) => ({
type: cartTypes.REMOVE_GOODS,
payload: { id },
});② 在 cartReducer 中实现删除商品的逻辑
// src/store/reducers/cartReducer.js
export default function cartReducer(state = initialState, action) {
switch (action.type) {
// 删除购物车中的商品
case cartTypes.REMOVE_GOODS:
return {
...state,
cart: state.cart.filter((item) => item.id !== action.payload.id),
};
}
}③ 在 CartItem 组件中发出删除商品的指令
// src/components/CartItem.js
import { removeGoodsCreator } from "../store/creators/cartCreators";
class CartItem extends Component {
render() {
// 当用户点击删除按钮时删除商品
return <button onClick={() => this.props.dispatch(removeGoodsCreator(goods.id))}></button>;
}
}4.8 将商品移入心愿单
目标：实现将商品移入心愿单功能
① 创建用于实现将商品加入心愿单的 action type、action creator
// src/store/types/wishTypes.js
// 向心愿单中添加商品
export const PUSH_GOODS_TO_WISH = "心愿单/添加商品";// src/store/creators/wishCreators.js
import * as wishTypes from "../types/wishTypes";
// 向心愿单中添加商品
export const pushGoodsToWishCreator = (goods) => ({
type: wishTypes.PUSH_GOODS_TO_WISH,
payload: { goods },
});② 在 wishReducer 中实将商品加入心愿单的逻辑
// src/store/reducers/wishReducer.js
import * as wishTypes from "../types/wishTypes";
const initialState = {
wishes: [],
};
export default function wishReducer(state = initialState, action) {
switch (action.type) {
// 向心愿单中添加商品
case wishTypes.PUSH_GOODS_TO_WISH:
return {
...state,
wishes: [...state.wishes, action.payload.goods],
};
}
}③ 在 CartItem 组件中发出将商品加入心愿单的指令和从购物车中删除当前商品的指令
// src/components/CartItem.js
import { pushGoodsToWishCreator } from "../store/creators/wishCreators";
import { removeGoodsCreator } from "../store/creators/cartCreators";
class CartItem extends Component {
render() {
// 将商品添加到心愿单、从购物车中删除该商品
return (
<button onClick={() => {
this.props.dispatch(pushGoodsToWishCreator(goods));
this.props.dispatch(removeGoodsCreator(goods.id));
}}></button>
);
}
}④ 在 Wish 组件中获取心愿单列表状态并渲染心愿单组件
// src/components/Wish.js
import { connect } from "react-redux";
class Wish extends Component {
render() {
// 获取心愿单列表
const wishes = this.props.wishes;
// 如果心愿单列表中存在商品, 渲染商品列表
return wishes.length > 0 ? (
<div className="card">
<div className="card-header py-3">
<h5 className="mb-0">心愿单</h5>
</div>
<div className="card-body">
<table className="table">
<thead>
<tr>
<th>名称</th>
<th>价格</th>
<th>颜色</th>
<th>尺码</th>
</tr>
</thead>
<tbody>
{wishes.map((wish) => (
<tr>
<th>{wish.title}</th>
<td>¥{wish.price}</td>
<td>{wish.color}</td>
<td>{wish.size}</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
) : null;
}
}
// 从 store 对象中获取组件需要的状态
const mapStateToProps = (state) => ({ wishes: state.wishReducer.wishes });
// 将组件需要的状态映射到组件的 props 对象中
export default connect(mapStateToProps)(Wish);4.9 渲染商品总价
目标：计算商品总价并渲染
import React, { Component } from "react";
import { connect } from "react-redux";
class Summary extends Component {
render() {
return <strong>¥{this.props.totalPrice()}</strong>;
}
}
const mapStateToProps = (state) => ({
totalPrice() {
return state.cartReducer.cart.reduce((price, item) => {
return (price += item.price * item.count);
}, 0);
},
});
export default connect(mapStateToProps)(Summary);目标：解决性能问题
在当前代码中存在的问题是只要组件发生更新就会执行 totalPrice 方法，无论当前更新是否和计算商品总价关系。
比如在 Summary 组件中声明 count 状态兵在点击按钮时更该状态，此时 totalPrice 方法也被执行。
// src/components/Summary.js
class Summary extends Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
render() {
return (
<button
onClick={() =>
this.setState((prevState) => ({
count: prevState.count + 1,
}))
}
type="button"
className="btn btn-primary btn-lg btn-block"
>
{this.state.count}
</button>
);
}
}解决办法是使用 reselect 库创建具有缓存功能的 totalPrice 方法。
npm install reselect@4.1.6// src/components/Summary.js
import { createSelector } from "reselect";
class Summary extends Component {
render() {
return <strong>¥{this.props.totalPrice}</strong>
}
}
const totalPriceSelector = createSelector(
(state) => state.cartReducer.cart,
(cart) => {
return cart.reduce((price, item) => {
return (price += item.price * item.count);
}, 0);
}
);
const mapStateToProps = (state) => ({
totalPrice: totalPriceSelector(state),
});05. Redux 中间件
5.1 概述
目标：理解什么是中间件、理解 Redux 中间件的作用
可以将中间件理解为事物处理的中间环节，比如下图中的饮用水处理流程，水库中的水在运送至用户之前要经过一系列的处理，而这些处理环节就是中间件。
Redux 中间件是用于处理状态的中间环节，状态的起始处理位置是通过 dispatch 方法发出的 Action 指令，终点位置是 store 对象。
Redux 中间件允许开发者在 Reducer 函数处理状态先对状态进行预处理或者先执行一些副作用代码，比如日志记录、异步请求等。
对于我们来说使用中间件最常做的事情就是执行异步请求的代码。
在 Redux 的工作流程中中间件可以有多个，多个中间件依次执行，下一个中间件总是基于上一个中间件的处理结果进行再处理。
中间件其实就是一堆依次执行的函数。
5.2 创建中间件函数
创建中间件函数要遵循中间件函数的创建规则，以下是创建中间件函数的模板代码。
function middleware(store) {
return function (next) {
// 当 Action 被触发后，执行的是最里层函数，外层函数是用来传递参数的，只有初始化时执行
return function (action) {
// 执行下一个中间件函数并传递 action 对象, 如果没有, 执行的就是 reducer 函数
// 在中间件函数中一定要调用 next 方法, 否则程序执行到当前中间件就卡住了
// redux 要求中间件函数要返回 next 方法的返回值, 否则发出指令的 dispatch 方法将没有返回值
return next(action)
}
}
}需求：创建 logger 中间件，作用是当有 Action 指定被发出时在浏览器的控制台中输出 Action 对象。
const logger = (store) => (next) => (action) => {
console.log(action);
return next(action);
};
export default logger;5.3 注册中间件函数
// src/store/index.js
import { applyMiddleware } from "redux";
import logger from "./middlewares/logger";
export const store = createStore(rootReducer, applyMiddleware(logger));5.4 中间件执行过程
目标：创建 logger 中间件记录状态更新过程，即当 Action 指令被发出后输出更新前的状态、更新后的状态以及触发的 Action 对象。
要实现以上目标我们必须先弄清楚中间件函数的执行过程。
中间件函数的执行分为两个阶段，第一阶段是状态更新前，就是调用 next 方法前的代码，第二阶段是状态更新后，就是调用 next 方法后面的代码。
当我们在程序中注册了 logger 中间件函数以后，logger 中间件和 reducer 就形成了嵌套关系，当调用 dispatch 方法后先执行 logger 中间件，此时状态还没有更新，在中间件函数中调用了 next 方法后会执行 reducer 函数，reducer 函数执行完成后会回到 logger 中间件函数中继续执行，此时状态已经更新。
我们可以这样理解，在一个函数中调用了另外一个函数，另外一个函数中的代码执行完成后程序会继续回到调用函数中继续执行代码。
function first () {
console.log("first");
second();
console.log("end");
}
function second () {
console.log("second");
}所以在 logger 中间件函数中我们可以在 next 方法调用前输出旧的状态对象，在 next 方法调用后输出新的状态对象。
// src/store/middlewares/logger.js
const logger = (store) => (next) => (action) => {
// 输出旧状态
console.log("prevState", store.getState());
// 输出用于更改状态的 action 对象
console.log("action", action);
// 执行下一个中间件函数, 如果没有, 执行的就是 reducer 函数
// next 其实就是 dispatch 方法
// ------------------------
const result = next(action);
// ------------------------
// 输出新状态
console.log("nextState", store.getState());
// 中间件函数被要求返回 dispatch 方法的返回值 即 next 方法的返回值
// 但这不是强制要求, 不返回也不报错, 不返回导致的结果是最外部的 dispatch 方法的返回值变成了 undefined
return result;
};
export default logger;目标：创建并注册 storage 中间件函数，测试注册多个中间件函数的执行过程。
storage 中间件的作用是当 store 对象中的状态发生变化以后将状态对象同步到浏览器中的本地存储。
// src/store/middlewares/storage.js
const storage = (store) => (next) => (action) => {
const result = next(action);
// 此处代码执行时, 状态已经更新, 所以可以将状态同步到本地了
localStorage.setItem("store", JSON.stringify(store.getState()));
return result;
};
export default storage;// 注册中间件
// src/store/index.js
import storage from "./middlewares/storage";
export const store = createStore(rootReducer, applyMiddleware(logger, storage));5.5 ReduxThunk 概述
目标：能够使用 redux-thunk 中间件处理应用中的异步操作
redux-thunk 是 Redux 官方提供的用于在 Redux 工作流程中加入异步操作的中间件。
redux-thunk 中间件扩展了 redux 的 dispatch 方法，使 dispatch 方法不仅能够接收对象形式的 Action，还可以接收函数形式的 Action。
// 使用 redux thunk 前
// 使用 dispatch 方法接收普通的 action 对象
dispatch({ type: "counter/increment" })
// 使用 dispatch 方法接收返回 action 对象的 action creator 函数
const increment = () => ({ type: "counter/increment" });
dispatch(increment());// 使用 redux thunk 后
// 使用 dispatch 方法接收函数形式的 action
dispatch(function () { /* 此处编写异步代码 */ })
// 使用 dispatch 方法接收返回函数的 action creator 函数
const increment = () => () => {
// 此处编写异步代码
}
dispatch(increment())redux thunk 的哲学是为开发者提供用于执行异步操作的函数，并将 dispatch 作为该函数的参数，当异步操作执行完成后开发者可以通过 dispatch 方法再发出一个同步 action 指令，该 action 指令走 reducer 函数，用于将异步操作的应用于 store 对象。
// 一个用于加载文章列表的 action creator 函数
const loadPosts = () => async (dispatch) => {
let response = await axios.get("https://jsonplaceholder.typicode.com/posts");
dispatch({ type: "savePosts", payload: { posts: response.data } })
}5.6 ReduxThunk 使用
目标：加载文章列表、渲染文章列表。
① 安装并注册 redux-thunk 中间件
npm install redux-thunk@2.4.1
npm install axios@0.27.2// src/store/index.js
import { applyMiddleware } from "redux";
import thunk from "redux-thunk";
export const store = createStore(rootReducer, applyMiddleware(thunk));② 创建用于保存文章列表的 action type 和用于加载文章列表的 action creator 函数
// src/store/action_types/posts.js
export const SAVE_POSTS = "posts/savePosts";// src/store/action_creators/posts.js
import axios from "axios";
import * as types from "../action_types/posts";
export const loadPosts = () => async (dispatch) => {
let response = await axios.get("https://jsonplaceholder.typicode.com/posts");
dispatch({ type: types.SAVE_POSTS, payload: { posts: response.data } });
};③ 创建用于保存文章列表数据的 reducer 函数并将它合并到 rootReducer
// src/store/reducers/posts.js
import * as types from "../action_types/posts";
const initialState = [];
export default function postsReducer(state = initialState, action) {
switch (action.type) {
case types.SAVE_POSTS:
return action.payload.posts;
default:
return state;
}
}// src/store/reducers/index.js
import { combineReducers } from "redux";
import postsReducer from "./posts";
export const rootReducer = combineReducers({
posts: postsReducer,
});④ 在组件中为按钮添加点击事件、事件触发后加载文章列表、文章列表加载完成后渲染文章列表
// src/App.js
import React, { Component } from "react";
import { connect } from "react-redux";
import { loadPosts } from "./store/action_creators/posts";
class App extends Component {
render() {
const dispatch = this.props.dispatch;
const posts = this.props.posts;
return (
<>
<button onClick={() => dispatch(loadPosts())}>loadPosts</button>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</>
);
}
}
const mapStateToProps = (state) => ({ posts: state.posts });
export default connect(mapStateToProps)(App);在使用了 Redux Thunk 以后，如果 action creator 返回的是异步函数，那么在将它传递给 dispatch 以后，dispatch 方法的返回值就变成了 Promise 对象，我们也可以通过该 Promise 对象的状态得知该异步操作是否完成。
5.7 ReduxThunk 参数
当 dispatch 方法接收函数类型的 action 时，该函数有三个参数。
第一个参数为 dispatch 方法，用于在异步操作执行完成后发出其他 Action 指令。
第二个参数为 getState 方法，用于获取当前 store 中存储的状态。
第三个参数为 extraArgument，表示额外的参数，该参数在创建 thunk 中间件函数时传递，根据应用需求传递。
// 第二个参数
dispatch(function (dispatch, getState) {
// 获取
const state = getState();
});// src/store/index.js
// 第三个参数
// 需求: 在创建 thunk 中间件时传递 axios 对象, 这样就避免了在每一个 action creator 文件中引入它
import thunk from "redux-thunk";
import axios from "axios";
// thunk 本身就是创建好的中间件
// thunk 作为对象, 它下面有一个方法叫做 withExtraArgument, 调用它也可以创建 thunk 中间函数, 并可以传递额外参数
export const store = createStore(
rootReducer,
applyMiddleware(thunk.withExtraArgument(axios))
);// 第三个参数
dispatch(function (dispatch, getState, extraArgument) {});
dispatch(function (dispatch, getState, axios) {})5.8 ReduxThunk 原理
目标：理解 Redux Thunk 的工作原理
// createThunkMiddleware 方法用于返回中间件函数
function createThunkMiddleware(extraArgument) {
// 返回中间件函数
return ({ dispatch, getState }) => next => action => {
// 如果 action 是函数类型
if (typeof action === 'function') {
// 调用函数并传递相关参数
return action(dispatch, getState, extraArgument);
}
// 如果 action 是对象类型, 调用 next 执行下一个中间件函数
return next(action);
};
}
// 调用 createThunkMiddleware 得到中间件函数
const thunk = createThunkMiddleware();
// 暴露获取中间件函数的方法, 用于方便开发者自己传递 extraArgument 参数
thunk.withExtraArgument = createThunkMiddleware;
// 导出默认创建好的 thunk 中间件函数
export default thunk;5.9 ReduxThunk 最佳实践
目标：加载文章列表、记录加载状态、渲染文章列表
① 创建用于加载文章列表相关的 action type
// src/store/action_types/posts.js
export const LOAD_POSTS = "posts/loadPosts";
export const LOAD_POSTS_SUCCESS = "posts/loadPostsSuccess";
export const LOAD_POSTS_ERROR = "posts/loadPostsError";② 创建用于操作文章列表状态的 reducer 函数
// src/store/reducers/posts.js
import * as types from "../action_types/posts";
const initialState = {
posts: [],
status: "idle",
};
export default function postsReducer(state = initialState, action) {
switch (action.type) {
case types.LOAD_POSTS:
return { ...state, status: "loading" };
case types.LOAD_POSTS_SUCCESS:
return { ...state, status: "success", posts: action.payload.posts };
case types.LOAD_POSTS_ERROR:
return { ...state, status: "error", error: action.payload.error };
default:
return state;
}
}③ 创建用于加载文章列表的 action creator 函数
// src/store/action_creators/posts.js
import * as types from "../action_types/posts";
import axios from "axios";
export const loadPosts = () => async (dispatch) => {
// 更改文章列表的加载状态为 loading
dispatch({ type: types.LOAD_POSTS });
// 捕获错误
try {
// 发送请求获取文章列表状态
let response = await axios.get(
"https://jsonplaceholder.typicode.com/posts"
);
// 保存文章列表数据并更改文章列表的加载状态为 success
return dispatch({
type: types.LOAD_POSTS_SUCCESS,
payload: { posts: response.data },
});
} catch (error) {
// 文章列表加载失败, 保存失败原因并更改文章列表的加载状态为 error
return Promise.reject(dispatch({
type: types.LOAD_POSTS_ERROR,
payload: { error: error.message },
}));
}
};④ 加载文章列表状态、渲染文章列表状态
// src/App.js
import React, { Component } from "react";
import { connect } from "react-redux";
import { loadPosts } from "./store/action_creators/posts";
class App extends Component {
// 渲染文章列表状态
renderPosts() {
// 获取文章列表状态
const postsState = this.props.postsState;
// 判断当前是否正在加载文章列表状态
if (postsState.status === "loading") return <div>loading....</div>;
// 判断文章列表状态是否加载失败
if (postsState.status === "error") return <div>{postsState.error}</div>;
// 文章列表状态加载成功 渲染文章列表状态
return postsState.posts.map((post) => <li key={post.id}>{post.title}</li>);
}
render() {
// 获取用于发出 action 指令的 dispatch 方法
const dispatch = this.props.dispatch;
return (
<>
{/* 点击按钮后加载文章列表状态 */}
<button onClick={() => dispatch(loadPosts())}>loadPosts</button>
{/* 渲染文章列表状态 */}
{this.renderPosts()}
</>
);
}
}
// 从 store 对象中获取文章列表状态
const mapStateToProps = (state) => ({ postsState: state.posts });
export default connect(mapStateToProps)(App);5.10 配置 Redux 开发工具
https://github.com/reduxjs/redux-devtools/tree/main/extension
https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd
npm install --save @redux-devtools/extension@3.2.3// src/store/index.js
import { composeWithDevTools } from '@redux-devtools/extension';
const store = createStore(
rootReducer,
composeWithDevTools(
applyMiddleware(thunk, logger)
)
);06. 综合案例-黑马头条
6.1 案例准备
获取频道列表：http://geek.itheima.net/v1_0/channels
获取频道新闻：http://geek.itheima.net/v1_0/articles?channel_id=频道id×tamp=时间戳
# 创建项目
npm init react-app redux-headlines
# 安装 redux react-redux redux-thunk
npm install redux@4.2.0 react-redux@8.0.2 redux-thunk@2.4.1 @redux-devtools/extension@3.2.3 axios@0.27.2// 频道组件: src/components/Channel.js
import React, { Component } from "react";
export default class Channel extends Component {
render() {
return (
<ul className="category">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
);
}
}// 文章列表组件: src/components/Post.js
import avatar from "../assets/back.jpg";
import React, { Component } from "react";
export default class Post extends Component {
render() {
return (
<div className="list">
<div className="article_item">
<h3>标题</h3>
<div className="img_box">
<img src={avatar} className="w100" alt="" />
</div>
<div className="info_box">
<span>作者</span>
<span>0 评论</span>
<span>发布日期</span>
</div>
</div>
</div>
);
}
}// 根组件: src/App.js
import React, { Component } from "react";
import Post from "./components/Post";
import Channel from "./components/Channel";
export default class App extends Component {
render() {
return (
<>
<Channel />
<Post />
</>
);
}
}// 应用入口文件: src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./assets/styles.css";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);/* 案例样式文件 src/assets/styles.css */
body {
margin: 0;
padding: 0;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
li {
list-style: none;
}
dl,
dd,
dt,
ul,
li {
margin: 0;
padding: 0;
}
.no-padding {
padding: 0px ;
}
.padding-content {
padding: 4px 0;
}
a:focus,
a:active {
outline: none;
}
a,
a:focus,
a:hover {
cursor: pointer;
color: inherit;
text-decoration: none;
}
b {
font-weight: normal;
}
div:focus {
outline: none;
}
.fr {
float: right;
}
.fl {
float: left;
}
.pr-5 {
padding-right: 5px;
}
.pl-5 {
padding-left: 5px;
}
.block {
display: block;
}
.pointer {
cursor: pointer;
}
.inlineBlock {
display: block;
}
.category {
display: flex;
overflow: hidden;
overflow-x: scroll;
background-color: #f4f5f6;
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
scroll-behavior: none;
-ms-overflow-style: none; /* Internet Explorer 10+ */
scrollbar-width: none; /* Firefox */
}
.category::-webkit-scrollbar {
display: none; /* Safari and Chrome */
}
.category li {
padding: 0 15px;
text-align: center;
line-height: 40px;
color: #505050;
cursor: pointer;
z-index: 99;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
.category li.select {
color: #f85959;
}
.list {
margin-top: 45px;
}
.article_item {
padding: 0 10px;
}
.article_item .img_box {
display: flex;
justify-content: space-between;
}
.article_item .img_box .w33 {
width: 33%;
height: 90px;
display: inline-block;
}
.article_item .img_box .w100 {
width: 100%;
height: 180px;
display: inline-block;
}
.article_item h3 {
margin: 0;
font-weight: normal;
line-height: 2;
}
.article_item .info_box {
color: #999;
line-height: 2;
position: relative;
font-size: 12px;
}
.article_item .info_box span {
padding-right: 10px;
}
.article_item .info_box span.close {
border: 1px solid #ddd;
border-radius: 2px;
line-height: 15px;
height: 12px;
width: 16px;
text-align: center;
padding-right: 0;
font-size: 8px;
position: absolute;
right: 0;
top: 7px;
}6.2 配置 Redux
目标：
// 用于操作频道状态的 reducer 函数: src/store/reducers/channel.js
const initialState = {
result: [],
status: "idle",
error: ""
};
export default function channelReducer(state = initialState, action) {
switch (action.type) {
default:
return state;
}
}// 用于操作文章列表状态的 reducer 函数: src/store/reducers/post.js
const initialState = {
result: [],
status: "idle",
error: ""
};
export default function postReducer(state = initialState, action) {
switch (action.type) {
default:
return state;
}
}// 根 reducer 函数: src/store/reducers/index.js
import { combineReducers } from "redux";
import channelReducer from "./channel";
import postReducer from "./post";
export const rootReducer = combineReducers({
channel: channelReducer,
post: postReducer,
});// 创建 store 对象: src/store/index.js
import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "@redux-devtools/extension";
import thunk from "redux-thunk";
import { rootReducer } from "./reducers";
export const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(thunk))
);// 在应用入口文件中配置 store 对象: src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import App from "./App";
import "./assets/styles.css";
import { store } from "./store";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Provider store={store}>
<App />
</Provider>
);6.3 加载频道状态渲染组件
目标：加载频道状态并使用频道状态渲染频道组件
- 创建用于加载频道状态的 action type
- 在 channelReducer 函数中匹配加载频道状态的 action type 类型并进行相应的状态操作
- 创建用于加载频道状态的 action creator 函数
- 等待频道组件挂载完成后加载频道状态并渲染组件
① 创建用于加载频道状态的 action type
// src/store/action_types/channel.js
export const LOAD_CHANNEL = "channel/loadChannel";
export const LOAD_CHANNEL_SUCCESS = "channel/loadChannelSuccess";
export const LOAD_CHANNEL_ERROR = "channel/loadChannelError";② 在 channelReducer 函数中匹配加载频道状态的 action type 类型并进行相应的状态操作
// src/store/reducers/channel.js
import * as types from "../action_types/channel";
export default function channelReducer(state = initialState, action) {
switch (action.type) {
case types.LOAD_CHANNEL:
return { ...state, status: "loading" };
case types.LOAD_CHANNEL_SUCCESS:
return { ...state, status: "success", result: action.payload.channel };
case types.LOAD_CHANNEL_ERROR:
return { ...state, status: "error", error: action.payload.error };
}
}③ 创建用于加载频道状态的 action creator 函数
// src/store/action_creators/channel.js
import axios from "axios";
import * as types from "../action_types/channel";
export const loadChannel = () => async (dispatch) => {
// 更改加载状态
dispatch({ type: types.LOAD_CHANNEL });
// 捕获错误
try {
// 发送请求加载频道状态
let response = await axios.get("http://geek.itheima.net/v1_0/channels");
// 保存频道状态并更新加载状态
dispatch({
type: types.LOAD_CHANNEL_SUCCESS,
payload: { channel: response.data.data.channels },
});
} catch (error) {
// 加载失败
dispatch({
type: types.LOAD_CHANNEL_ERROR,
payload: { error: error.message },
});
}
};sss④ 等待频道组件挂载完成后加载频道状态并渲染组件
// src/components/Channel.js
import React, { Component } from "react";
import { connect } from "react-redux";
import { loadChannel } from "../store/action_creators/channel";
class Channel extends Component {
state = {
activeIndex: 0,
};
// 组件挂载完成之后
componentDidMount() {
// 加载频道状态
this.props.dispatch(loadChannel());
}
// 当点击频道时
clickHandler(channel_id) {
// 更新高亮状态
this.setState({ activeIndex: channel_id });
}
render() {
// 从频道状态中获取频道列表、频道加载状态、加载错误信息
const { result, status, error } = this.props.channel;
// 判断当前是否正在加载频道状态
if (status === "loading") return <div>loading...</div>;
// 判断是否加载失败
if (status === "error") return <div>{error}</div>;
// 渲染频道状态列表
return (
<ul className="category">
{result.map((channel) => (
<li
onClick={() => this.clickHandler(channel.id)}
className={this.state.activeIndex === channel.id ? "select" : ""}
key={channel.id}
>
{channel.name}
</li>
))}
</ul>
);
}
}
// 从 store 对象中获取频道状态
const mapStateToProps = (state) => ({ channel: state.channel });
export default connect(mapStateToProps)(Channel);6.4 加载文章状态渲染组件
目标：加载文章状态并渲染文章组件
- 创建用于加载文章列表状态的 action type
- 在 postReducer 函数中匹配加载文章状态的 action type 类型并进行相应的状态操作
- 创建用于加载文章列表状态的 action creator 函数
- 等待文章组件挂载完成后加载推荐文章状态并渲染组件
- 当切换频道时重新获取对应的文章列表状态
① 创建用于加载文章列表状态的 action type
// src/store/action_types/post.js
export const LOAD_POSTS = "post/loadPosts";
export const LOAD_POSTS_SUCCESS = "post/loadPostsSuccess";
export const LOAD_POSTS_ERROR = "post/loadPostsError";② 在 postReducer 函数中匹配加载文章状态的 action type 类型并进行相应的状态操作
// src/store/reducers/post.js
import * as types from "../action_types/post";
export default function postReducer(state = initialState, action) {
switch (action.type) {
case types.LOAD_POSTS:
return { ...state, status: "loading" };
case types.LOAD_POSTS_SUCCESS:
return { ...state, status: "success", result: action.payload.channel };
case types.LOAD_POSTS_ERROR:
return { ...state, status: "error", error: action.payload.error };
}
}③ 创建用于加载文章列表状态的 action creator 函数
// src/store/action_creators/post.js
import axios from "axios";
import * as types from "../action_types/post";
export const loadPosts = (channel_id) => async (dispatch) => {
// 更新加载状态
dispatch({ type: types.LOAD_POSTS });
// 捕获错误
try {
// 发送请求获取文章列表
let response = await axios.get(
`http://geek.itheima.net/v1_0/articles?channel_id=${channel_id}×tamp=${Date.now()}`
);
dispatch({
type: types.LOAD_POSTS_SUCCESS,
payload: { channel: response.data.data.results },
});
// 保存文章状态并更改加载状态
} catch (error) {
dispatch({
type: types.LOAD_POSTS_ERROR,
payload: { error: error.message },
});
}
};④ 等待文章组件挂载完成后加载推荐文章状态并渲染组件
// src/store/action_creators/post.js
import avatar from "../assets/back.jpg";
import React, { Component } from "react";
import { connect } from "react-redux";
import { loadPosts } from "../store/action_creators/post";
class Post extends Component {
// 组件挂载完成后
componentDidMount() {
// 获取推荐文章列表
this.props.dispatch(loadPosts(0));
}
render() {
const { status, result, error } = this.props.post;
if (status === "loading") return <div>loading...</div>;
if (status === "error") return <div>{error}</div>;
return (
<div className="list">
{result.map((post) => (
<div key={post.art_id} className="article_item">
<h3>{post.title}</h3>
<div className="img_box">
<img
src={post.cover.type === 0 ? avatar : post.cover.images[0]}
className="w100"
alt={post.title}
/>
</div>
<div className="info_box">
<span>作者: {post.aut_name}</span>
<span>{post.comm_count} 评论</span>
<span>发布日期: {post.pubdate}</span>
</div>
</div>
))}
</div>
);
}
}
const mapStateToProps = (state) => ({ post: state.post });
export default connect(mapStateToProps)(Post);⑤ 当切换频道时重新获取对应的文章列表状态
// src/components/Channel.js
import { loadPosts } from "../store/action_creators/post";
class Channel extends Component {
// 当点击频道时
clickHandler(channel_id) {
if (channel_id !== this.state.activeIndex) {
// 更新高亮状态
this.setState({ activeIndex: channel_id });
// 获取文章列表
this.props.dispatch(loadPosts(channel_id));
}
}
}本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 麟玖Sam！
相关推荐
2025-03-21
React 基础 - JSX
React 基础 - JSX01. React 概述 目标：了解 React 是什么 官方文档(英文)、官方文档(中文)、官方文档(新版、开发中、英文) 官方释义：A JavaScript library for building user interfaces ( 一个用于构建用户界面的 JavaScript 库 )。 React 是一个开源的 JavaScript 库，用于构建 web 应用中的视图层，就是 web 应用中的前端用户界面。 React 是目前最为流行的前端框架之一。 https://npmtrends.com/angular-vs-react-vs-vue https://trends.google.com/trends/explore?q=react,vue,angular React 是由 Facebook 的软件工程师在 2012 年创建，于 2013 年 5 月开源，目前由 Facebook 以及个人开发人员和公司组成的社区维护。 React 起源于 Facebook 的内部项目，因为当时该公司对市场上所有 JavaScript...
2025-03-26
React 基础-组件-类组件
React 基础-组件-类组件01. 组件概述 目标：了解 React 组件的作用和创建组件的方式 什么是组件 组件设计思想 1. 什么是组件在前端开发中组件就是用户界面当中的一块独立的区域，在组件内部会包含这块区域中的视图代码、样式代码以及逻辑代码。 React 采用组件的方式构建用户界面，通过将多个组件进行组合形成完成的用户界面，就像搭积木。 2. 组件设计思想组件的核心思想之一就是复用，定义一次到处使用。 组件可以用来封装用户界面中的重复区块，复用重复区块。 组件的另外一个核心思想是解耦。 在传统的 web 页面开发中，一个 html 文件就是一个页面，就是说当前页面中的所有代码都被写在了同一个文件中，这就很容器导致代码的冲突。 在组件化开发中，每个组件都有自己的作用域，组件与组件之间的代码不会发生冲突，从而避免在传统开发模式中经常出现的改A坏B的问题。 02. 创建组件 目标：掌握创建类组件的方式 import ReactDOM from "react-dom/client"; import { Component...
2025-03-26
React 基础-组件-类组件通讯
React 基础-组件通讯-类组件01. 组件通讯概述 目标：掌握什么是组件通讯 对于不同的组件而言，组件通讯是指数据能够在不同的组件之间进行流动。 在使用组件构建用户界面时，我们会将一个完整的页面拆分为若干个独立的小的组件，这些组件在完成不同任务时通常需要协同工作，比如多个组件需要用到相同的数据，因此组件之间必须能够相互通信，即在不同的组件之间传递数据。 组件通讯包含父子通讯、兄弟通讯、远房亲戚通讯。 对于同一个组件而言，组件通讯可以实现差异化复用组件。 02. 组件通讯基础 目标：掌握在组件外部向组件内部传递数据的方式、掌握在组件内部获取外部传递进来的数据的方式 在调用组件时通过属性的方式向组件内部传递数据。 // src/App.js import React from "react"; import Person from "./Person"; export default class App extends React.Component { render() { return...
2025-03-26
React路由[V5]
React 路由01. 路由概述 目标：理解前端路由的作用 在传统的 web 应用中前端都是由多页面组成的，用户可以通过链接在不同的页面之间进行跳转。 为了提升用户体验，在现代的 web 应用中前端大多都是单页面应用程序，也就是只有一个 HTML 页面的应用程序。 即使是单页面应用程序我们也要满足用户可以在”不同页面之间”跳转的需求，所以前端路由应运而生。 前端路由是指让用户从一个视图导航(跳转)到另一个视图，此处的视图指的是表示页面的组件，也就是使用组件代替传统 web 应用中的 HTML 页面。 前端路由实际上就是 URL 路径与组件之间的映射关系，即不同的页面组件对应不同的 URL 路径，用户可以通过不同的 URL 路径访问不同的页面组件。 02. 基本使用 目标：掌握路由的基本用法 下载 React Router 并准备页面组件 创建路由规则并在应用中使用 Route 组件的另一种语法格式 ① 下载 React Router 并准备页面组件 npm install react-router-dom@5.3.3 //...
2025-03-26
React 基础-组件-组件进阶
React基础-组件进阶-类组件01. 组件属性校验 目标：掌握组件属性校验的基本使用方式 对于组件来说，组件属性 (props) 是组件的调用者传递的，如果组件调用者传递的组件属性不符合要求，将会导致组件内部的代码执行出错，所以为了组件运行的稳定性，我们需要在组件内部对接收的组件属性进行校验。 https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html class App extends React.Component { render() { return <Colors colors={100} />; } } class Colors extends React.Component { render() { return ( <ul> {this.props.colors.map((item) => ( ...