Redux 是一个流行的 JavaScript 状态管理库，用于更新和控制应用的状态。React 也是一个非常流行的 JavaScript 库，用于构建用户界面。这两个库的组合，能够提供良好的可扩展性、可维护性和可测试性。
在本文中，我们将了解如何将 Redux 集成到 React 应用程序中，并且如何使用 Redux 来存储和管理应用程序的状态。
快速入门
我们首先需要安装 Redux 和 React-Redux 两个包：
npm install --save redux react-redux
然后，我们需要创建 Redux store 和 reducers。先创建一个 src/store.js 文件，该文件导出一个包含 reducer 和初始状态的 Redux store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
------ ------- ------接着，我们需要创建一个 React 组件，并将其连接到 Redux store，这个组件将会使用存储在 Redux store 中的状态。我们将在 src/App.js 文件中创建一个 Counter 简单计数器组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
-------- -------------- -
------ -
-----
----------------------
------- --------------------------------------------
------- --------------------------------------------
------
--
-
----- --------------- - ----- -- --
------ ------------
---
----- ------------------ - -------- -- --
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
---
------ ------- ------------------------ -----------------------------在上面的代码中，我们使用 connect 函数来将 Redux store 中的状态和 actioncreator 连接到组件中。同时，我们还将 mapStateToProps 函数用来将 Redux store 中的状态映射到组件的 props 中，用于渲染。
最后，我们需要在 src/index.js 文件中渲染刚刚创建的 Counter 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ ------- ---- --------
----------------
--------- --------------
-------- --
------------
--------------------------------
--在上面的代码中，我们使用 Provider 组件来将 Redux store 注入到 React 应用中，这样所有的子组件都可以访问到 Redux store 中的数据。
现在，我们可以启动 React 应用并查看计数器的行为：
npm start
示例代码
以上是一个简单的示例，您可以从 这个 Github 仓库 中获取完整的示例代码。
结论
Redux 和 React 是两个强大的工具，在配合使用时，能够创建出非常复杂和强大的应用程序。Redux 能够帮助我们存储和处理应用的状态，而 React 能够帮助我们构建优秀的用户界面。在 Redux 和 React 的帮助下，我们可以构建出具备良好的可扩展性、可维护性和可测试性的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752b5a38bd460d3ad979812