在现代的 Web 应用中，状态管理是一项很重要的任务，它可以让我们实现更好的用户体验和功能。在开发 PWA (Progressive Web App) 的过程中，我们需要对应用程序状态进行管理，以便在不同的条件下快速响应用户请求。
Redux 是一种流行的状态管理解决方案，它可以帮助我们更好地管理应用程序的状态，并且减少了因状态的复杂性而产生的 bug。
1. 安装 Redux
首先，我们需要在应用程序中安装 Redux。可以通过 npm 来安装 redux，具体的命令如下：
--- ------- -----
2. 创建 Store
接下来，我们需要创建 Store。Store 是 Redux 中保存应用程序状态的地方。在这里，我们定义了状态、状态的行为以及状态的响应方式。例如，在一个购物车应用程序中，状态可能包括每个物品的数量、价格和总价格。行为包括添加物品到购物车和从购物车中删除物品。响应方式包括将状态更新到服务器以及将状态保存在客户端中。
在创建 Store 之前，我们需要定义状态和状态的行为。可以使用 actions 和 reducers。
2.1 定义 Action
Action 是一个对象，它描述了某个事件的发生。例如，在购物车应用程序中 add-to-cart 行为应该传递商品 ID。actions 的结构是固定的，它们通常包括以下两个属性：
-
----- --------------
-------- -
---------- --
--------- -
-
-2.2 定义 Reducer
Reducer 是一个函数，当 Action 发生时，改变 State。Reducer 必须是一个纯函数，它只能接收 State 和 Action 作为参数，并恰好返回新的 State。
----- ------------ - - ----- -- -
-------- ----------------- - ------------- ------- -
------------------- -
---- --------------
------ -
---------
----- -
--------------
-
---------- -------------------------
--------- ------------------------
-
-
-
--------
------ -----
-
-2.3 创建 Store
一旦定义了 actions 和 reducers，我们就可以创建 Store 了。
------ - ----------- - ---- ------- ------ ----------- ---- ------------------------ ----- ----- - ------------------------
在这里，我们先 import createStore，这是用于创建 Store 的 Redux 方法。store 会通过 cartReducer 进行管理。
3. 使用 Connect 将 Redux 和 React 进行绑定
我们需要在 React 组件上绑定 store，并通过连接函数完成。连接函数使我们无需手动映射 store 的状态，它帮我们把 Redux 存储库中的状态绑定到组件的 Props 中。
例如，在以下代码中，我们将 connect 函数用于组件中。
------ ------ - --------- - ---- -------
------ - ------- - ---- -------------
----- ------------ ------- --------- -
-------- -
----- - ---- - - ----------
------ -
-----
------------ ---------
----
-------------- -- -
--- ---------------------
--------------- - ------- -- ----------------
-----
---
-----
------
-
-
-
------ ------- --------------- -- -
------ -
----- -----------
-
----------------在这里，我们用 connect 函数把 cartState 映射到组件上，而不用手动调用 state.cart。这使得我们可以直接访问 cartState，而不需要了解它是如何存储的。
4. 触发 Action
最后，我们需要触发 Action 以更新状态。有两种方法可以触发 Action：直接使用 Store 的方法 dispatch，或者使用 bindActionCreators。
----------------
----- --------------
-------- -
---------- --
--------- -
-
-------- - ------------------ - ---- ------- ------ - --------- - ---- ----------------------- ----- ------------------ - ---------- -- -------------------- ---------- -- --------- ------ ------- ------------------------ ---------------------------------
在这里，我们定义 mapDispatchToProps 函数，它通过 bindActionCreators 工具绑定了 addToCart，然后传递给商品组件。这样，在组件中调用 this.props.addToCart 方法，就可以通过 Store 触发 ADD_TO_CART Action 了。
总结一下，使用 Redux 可以帮助我们实现更好的状态管理，使应用程序更可靠和可控。在使用 Redux 时，需要明确 Actions、Reducers 和 Store 的职责以及如何处理它们之间的关系。同时，使用 React-Redux 的 Connection API 可以使我们更快速地将 Store 和 Components 进行绑定。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653407557d4982a6eb7da1c9