在现代前端应用程序中，状态管理变得越来越重要。React-Redux 是一种流行的状态管理库，可以帮助开发者简化 React 应用中的状态管理。本文将介绍如何在 React 单页面应用(SPA)中使用 React-Redux 进行全局状态管理。
什么是 React-Redux
React-Redux 是一个自动将 Redux 状态管理器绑定到 React 应用程序中的库。它提供了一个容器(或高阶组件)，可以将 Redux 状态映射到 React 应用程序的属性中，并将操作(dispatch)映射到 React 应用程序中的操作。
React-Redux 结合使用两个主要的 React API：context 和高阶组件。context API 可以让我们在应用程序中传递数据而不要一直通过 props 传递，而高阶组件则让我们对 React 组件进行包装和修改。
安装 Redux 和 React-Redux 库
在使用 React-Redux 之前，必须先安装 Redux 和 React-Redux 库。可以在命令行中使用 npm 或 yarn 安装：
--- ------- ----- -----------
或
---- --- ----- -----------
创建 Redux Store
Redux 应用程序包括以下三个部分：
- 状态(state)
- 操作(dispatch)
- 转换(reducer)
在 React-Redux 应用程序中，store 对象包含状态，操作和转换器，可以使用 Redux createStore 函数创建它。根据你的应用程序需求来决定要在 store 里存储什么数据。
如果你的应用程序的状态非常简单，可以直接将状态存储在 store 中。如果状态非常复杂，则应使用对象来存储状态。以下是一个存储简单状态的 store：
------ - ----------- - ---- -------- ----- ------- - ------- ------- -- - -- -------- -- ----- ------------ - - ------ - -- ----- ----- - -------------------- --------------
在这个例子中，我们使用 createStore 函数创建了一个 Redux store。它接受两个参数，第一个参数是 reducer 函数，第二个参数是初始化状态。
创建 Reducer 函数
在 Redux 中，reducer 函数是一个纯函数，它接受旧状态和操作(dispatch)并返回新状态。它描述了 Redux 应用程序状态如何响应操作，虽然我们可以使用多个 reducer，但是每个 reducer 只能管理一个状态属性。以下是一个简单的 reducer 示例：
------ - ---------- --------- - ---- --------------
----- -------------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ----------
------ - --------- ------ ----------- - - --
---- ----------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
------ ------- ---------------在这个例子中，我们定义了一个纯函数 counterReducer，它接受旧状态(state)和操作(action)，并返回新状态对象。使用 spread 运算符(...)浅复制旧状态(state)，并更新 count 属性作为新的状态对象返回。
创建 Actions 与 Types
在 Redux 中，将状态更新为通过 dispatch 分发的操作，而这个操作由一个 action 创建器函数返回。例如，以下是一个逐步增量 count 的操作：
------ ----- --------- - ------------
------ ----- --------------- - -- -- -
------ -
----- ----------
-------- - ------ - --
--
--在这个例子中，我们定义了一个常量 INCREMENT，并创建了一个 action 创建器函数实现逐步增量 count。
使用 Redux Provider
在 React 中使用 React-Redux，必须将 Redux store 作为 props 传递给整个 React 应用程序。这可以通过 React Redux 库提供的 Provider 组件实现。以下是一个示例：
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--store 可以传递给 Provider 组件。Provider 组件将自动向 store 注册与它相关的 React 组件，并允许这些组件接收 store 的状态(state)和操作(dispatch)。
使用 connect 高阶组件
要使用 React-Redux 应该使用 connect 高阶组件。它接受将状态映射到属性的函数和操作映射到属性的函数，并返回一个新的组件。新组件具有根据定义的映射从 store 接收的状态属性和操作属性。
以下是映射状态到属性的示例：
------ - ------- - ---- -------------- ------ ------- ---- ------------ ----- --------------- - ------- -- - ------ - ------ ----------- -- -- ----- ---------------- - ---------------------------------- ------ ------- -----------------
在这个例子中，我们使用 connect 高阶组件连接 state 中的属性 count 和 Counter 组件。这将使 Counter 组件可以像属性一样使用此连接包装组件中的状态。
最后，我们需要使用 connect 高阶组件来将操作属性映射到 React 组件中：
------ - ------- - ---- --------------
------ ------- ---- ------------
------ - ---------------- --------------- - ---- ------------
----- --------------- - ------- -- -
------ - ------ ----------- --
--
----- ------------------ - ---------- -- -
------ -
---------- -- -- ----------------------------
---------- -- -- ----------------------------
--
--
----- ---------------- - ------------------------ -----------------------------
------ ------- -----------------在这个例子中，我们使用 mapDispatchToProps 函数将操作属性(increment 和 decrement)映射到 Counter 组件，并使用 connect 高阶组件将它们连接到 Redux store 中。
最后，可以将 CounterContainer 组件使用ReactDOM渲染到 DOM 中，如下所示：
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ---------------- ---- ---------------------
------ ----- ---- ----------
----------------
--------- --------------
----------------- --
------------
-------------------------------
--总结
这篇文章介绍了如何使用 React-Redux 库的步骤，用于状态管理，包括如何创建 Redux store，如何创建 reducer 和 actions，如何使用 Provider 和 connect 高阶组件连接 React 应用程序到 Redux。学习这些步骤将帮助你构建一个具有可扩展性的 React 应用程序，并在应用程序中轻松管理状态。
完整示例代码：https://codesandbox.io/s/brave-montalcini-4zxp4?file=/src/App.js
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64aa8c6d48841e98946a9016