React 中如何使用 React-Redux 管理状态
什么是 React-Redux
React-Redux 是一个全局的状态管理（Redux）库与 React 进行结合的一种方式，它主要使用 React 中的 Context 特性来实现全局状态管理。
通过将应用程序的状态放入到 Redux 中，我们可以保证在整个应用程序中的任何部分都可以访问和更改此状态。React-Redux 为此提供了可重用的高阶组件和钩子函数，以方便我们在 React 中使用 Redux。
如何使用 React-Redux
下面我们将逐步介绍如何在 React 中使用 React-Redux 实现全局状态管理。
1. 安装 React-Redux
首先，我们需要使用 npm 安装 React-Redux：
npm install react-redux --save
2. 创建 Redux Store
接下来，我们需要创建一个 Redux Store，它将保存我们的应用程序状态：
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- ------------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- -------------------
------ -
-- ------ ----- ----
-
--------
------ -----
-
-
----- ----- - --------------------
------ ------- -----在这个示例中，我们创建一个空对象作为初始状态，然后创建了一个简单的 reducer 函数来处理来自 Redux 储存的动作类型。
3. 连接 React 组件到 Redux
现在，我们可以将我们的 React 组件连接到 Redux。
我们可以在组件中使用 connect() 函数来连接，它将包装我们的组件并为其提供与 Redux 的连接：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
----- ----------- - ------- -- -
------ -
-----
------------------------
------- ----------------------------- ------------
------
-
-
----- --------------- - ------- -- -
------ -
-------- -------------
-
-
----- ------------------ - ---------- -- -
------ -
-------- -- -- -
---------- ----- ------------------- ----- - -------- ------- ------------- - --
-
-
-
------ ------- ------------------------ --------------------------------在这个示例中，我们使用 connect() 函数将 MyComponent 组件包装，并使用 mapStateToProps 将 Redux 的状态映射到组件的 props 上，使用 mapDispatchToProps 将 Redux 的 dispatch 函数映射到组件的 props 上，以方便在组件中触发 Redux 的动作。
4. 引入 Provider 组件
现在，我们需要在应用程序的根目录中引入 Provider 组件。它将使我们的 Redux Store 成为所有子组件都能访问的全局状态：
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------- - ---- -------------
------ ----- ---- ---------
------ ----------- ---- ---------------
----- --- - -- -- -
------ -
--------- --------------
------------ --
-----------
-
-
------ ------- ---在这个示例中，我们将 store 引入，使用 Provider 组件将该状态提供给了整个 React 应用程序，以便所有后代组件都可以通过 connect() 来访问它。
总结
使用 React-Redux，我们可以更方便地在 React 应用程序中管理和共享状态。我们只需要创建 Redux Store 并使用 connect() 包装组件后，就可以很容易地访问和更改此状态。这将使我们的代码更清晰、更易于维护，并提高开发效率。
示例代码
你可以通过访问下方链接找到本文所提到的所有示例代码：
https://github.com/reactjs/react-redux
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6474157a968c7c53b0184c00