Redux 作为一种状态管理工具，可以与 React 完美结合，为我们在构建 Web 应用的过程中提供了更加可靠和灵活的状态管理解决方案。本文将介绍如何在 React 应用中使用 Redux，并展示它们如何深度融合，以便更好地使用和理解它们。
Redux 和 React 的结合
在 React 应用中使用 Redux 要实现三个主要目标：
- 对 Redux 的 store 进行初始化和管理
- 将 React 组件连接到 store 上
- 通过 action 更新 store，从而重新渲染 React 组件
Redux 的 store
首先，需要安装 redux 和 react-redux 的依赖：
npm install --save redux react-redux
然后在应用程序的入口文件中创建一个 store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
-- ----- ------ -----
--------
------ ------
-
-
----- ----- - -------------------------
------ ------- ------这个 createStore() 方法创建了一个新的 store，并且告诉 Redux 如何处理 action。在这个例子中，我们只是简单地返回当前的 state。实际上，我们需要在 switch 语句中基于 action 的类型来更新 state，但是我们会在下面的例子中更深入地讨论。
将组件连接到 store 上
现在，我们需要告诉 React 组件如何连接到我们的 Redux store。为此，我们将使用 react-redux 库中的 Provider 组件，它将 store 传递给我们的整个应用程序：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--这将在我们的应用程序中注入 store，因此所有的组件都将能够访问它。
更新 store
最后，我们需要在组件中调用 action 来更新 store。为此，我们可以使用 connect() 方法连接组件并将需要的 state 和 action 传递给它。
例如，考虑以下组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ----------- ------- --------------- -
----------- - -- -- -
--------------------- ----- ------------------- ---
-
-------- -
------ -
-----
---------- ------ ------------------------
------- ---------------------------------------------
------
--
-
-
----- --------------- - ------- -- --
-------- -------------
---
------ ------- --------------------------------------在这个例子中，我们定义了一个 MyComponent 类，它显示了一个计数器的当前值，并提供了一个按钮来增加它。当用户点击按钮时，handleClick() 方法会派发 INCREMENT_COUNTER 的 action。
我们还定义了一个 mapStateToProps() 函数，它将 应用程序的 state 映射到 props 中。在这个例子中，我们只是将 counter 属性映射到 Redux store 中的 counter 属性。这使得在组件中访问 store 中的值非常容易。
最后，我们将组件连接到 store 上，以便它可以访问我们所需要的状态和 action。这里我们使用了 connect() 方法进行连接，该方法的第一个参数是 mapStateToProps() 函数，第二个参数是 MyComponent 类本身。
示例代码
下面是一个完整的示例代码，包括一个包含一个计数器的单个组件，以及 Redux store 和所有必要的 reducer 和 action。该组件使用了上面描述的结合方式来与 Redux store 交互。
-- -------------------- ---- -------
-- --------
------ - ----------- - ---- --------
----- ------------ - -
-------- -
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- --------------------
------ -
---------
-------- ------------- - -
--
--------
------ ------
-
-
----- ----- - -------------------------
------ ------- ------
-- --------------
------ ----- ---- --------
------ - ------- - ---- --------------
----- ----------- ------- --------------- -
----------- - -- -- -
--------------------- ----- ------------------- ---
-
-------- -
------ -
-----
---------- ------ ------------------------
------- ---------------------------------------------
------
--
-
-
----- --------------- - ------- -- --
-------- -------------
---
------ ------- --------------------------------------在这个示例中，我们定义了一个名为 MyComponent 的组件，它显示了计数器的当前值，并为其提供了一个增加计数器值的按钮。在 handleClick() 方法中，它将发出 INCREMENT_COUNTER 的 Redux action。
我们还定义了一个存储在 store.js 文件中的 reducer，用于处理该 action。该 reducer 采用一个初始状态对象，并根据 action 的类型更新状态（在本例中，是增加计数器的值）。
最后，我们将所有这些放在一起，并在应用的入口文件中将 Provider 包装在 App 组件中，这样我们的组件就可以访问到全局的 Redux store 了。
结论
Redux 和 React 的组合是一种非常强大的工具，它可以简化状态管理和组件之间的通信，从而使我们能够更好地构建 Web 应用程序。在本文中，我们已经学习了如何使用 redux 和 react-redux 库将它们结合起来，以便更有效地更新我们的应用程序状态，可以通过示例代码来更加深入地理解它们的工作原理。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67175202ad1e889fe220e135