在前端开发中，经常会遇到需要管理列表数据的场景。例如：展示多个商品、文章列表、用户列表等。但是，随着数据的变化，列表状态的管理变得越来越复杂，为此我们需要一种高效的方案进行管理。
Redux 就是这样一种高效的方案。它是一种状态管理工具，可以帮助我们在多个组件之间有效地共享和管理数据。
Redux 的工作原理
Redux 的基本思想是将应用的状态存放在一个单一的地方，称为“Store”。每个组件都可以从 Store 中获取数据，并且在需要时更新数据。当一个组件更新 store 中的数据时，所有订阅的组件都会收到通知。
Redux 的数据流向是单向的，即从组件发出 action 到 reducer，最终更新 store 和通知订阅的组件。
总体上，Redux 的工作流程如下：
组件发出一个 action，描述发生的事件。
Store 根据接收到的 action 及当前的状态，更新 store。
Store 将更新后的数据传递给所有订阅的组件，组件重新渲染自身。
实现列表状态管理
现在，我们尝试使用 Redux 来实现一个购物车的例子，展示商品的列表和已选商品的列表，通过 Redux 进行状态管理。
第一步：安装 Redux 相关依赖
我们首先需要在项目中引入 Redux 和 React-Redux 库，可以通过如下命令安装：
npm install redux react-redux
第二步：定义 Action 和 Reducer
在 Redux 中，我们需要定义 Action 和 Reducer。
Action 是 redux-store 可以响应的动态改变的状态。我们可以通过调用 dispatch 来通知 store 去修改某个状态。
下面是通过 action 来实现增加 / 删除购物车商品的例子：
-- -------------------- ---- ------- -------- ------ ----- ----------- - -------------- ------ ----- ---------------- - ------------------- ------ -------- ------------------ - ------ - ----- ------------ -------- ------- - - ------ -------- ------------------------- - ------ - ----- ----------------- -------- --------- - -展开代码
Reducer 负责处理 Action，它接收一个旧的 state 和一个 action，返回一个新的 state，它是纯函数，不会对原始 state 进行修改。
下面是通过 reducer 来实现增加 / 删除购物车商品的例子：
-- -------------------- ---- ------- --------- ------ - ------------ ---------------- - ---- ------------------------- ----- ------------ - - --------- -- -- ------ ------- -------- ----------------- - ------------- ------- - ------ ------------- - ---- ------------ ------ - --------- --------- ------------------- --------------- -- ---- ----------------- ------ - --------- --------- ----------------------------- -- ---------- --- --------------- -- -------- ------ ------ - -展开代码
第三步：创建 store 并将其注入应用
我们需要使用 createStore 创建一个 store，并应用在顶层组件 App 上，然后使用 Provider 将 store 注入应用。
-- -------------------- ---- ------- -- -------- ------ - -------- - ---- -------------- ------ - ----------- - ---- -------- ------ ----------- ---- ------------- ----- ----- - ------------------------- ---------------- --------- -------------- ---- -- ------------ ------------------------------- --展开代码
第四步：使用 connect 函数将组件连接到 store
在我们的组件中，通过 connect 函数连接组件和 store，这样我们就可以在组件的 props 中获取 state 和 dispatch 函数了。connect 函数接收两个参数：mapStateToProps 和 mapDispatchToProps，其中 mapStateToProps 将 store 中的数据映射到组件的 props 中，mapDispatchToProps 将 redux action 包装成 dispatch 函数，然后传递给组件。
下面是 App 组件使用 connect 函数进行连接的示例代码：
-- -------------------- ---- ------- -- ------ ------ - ------- - ---- -------------- ------ - ---------- -------------- - ---- ------------------------ ----- --- ------- --------- - -------- - ------ - ---- ---------------- ------------ ---------- ------------ -------------------------------- -- ------------ -------------- ----- ------------------------------ ------------------------------------------ -- ------ -- - - ----- --------------- - ------- -- - ------ - --------- ------------------- - -- ----- ------------------ - ---------- -- - ------ - ---------- --------- -- ----------------------------- --------------- --------- -- --------------------------------- - -- ------ ------- ------------------------ -------------------------展开代码
第五步：在组件中使用 state 和 dispatch
在我们的组件中，我们可以从 props 中获取到 state 和 dispatch 函数。
下面是 ProductList 组件和 Cart 组件使用 state 和 dispatch 的示例代码：
-- -------------------- ---- ------- -- -------------- ------ ---------- ---- ------------------ ----- ----------- ------- --------- - -------- - ------ - ----- ----------------------- -- - ---- ----------------- --------------------------- ------- ----------- -- ---------------------------------- -- ------------- ------ --- ------ -- - - ------ ------- ------------展开代码
-- -------------------- ---- ------- -- ------- ----- ---- ------- --------- - -------- - ------ - ----- ---------------------------------- -- - ---- ----------------- --------------------------- ------- ----------- -- --------------------------------------------- ---- ------------- ------ --- ------ -- - - ------ ------- -----展开代码
总结
通过 Redux 进行列表状态的管理，可以帮助我们更好地组织代码，并提高组件之间的可重用性和灵活性。Redux 的单向数据流思想让我们的代码更加易于维护，同时也可以使用它来进行全局状态的管理。
上述购物车例子只是 Redux 的应用示例之一，希望能够帮助大家理解 Redux 的使用。在实际开发中，我们可以根据具体需求去设计我们的数据结构和 Redux 的具体实现，让我们的代码更加优雅和可读。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65966909eb4cecbf2da3c5ca
