如果你正在开发使用 React.js 的单页面应用程序，那么你可能会发现随着应用变得越来越复杂，组件之间的状态管理变得越来越困难。这时，Redux 就能帮助你管理应用程序中的状态，提高代码的可维护性和可扩展性。本文将介绍如何在 React.js 单页面应用程序中集成 Redux，帮助你快速提升 Web 应用程序开发的能力。
Redux 简介
Redux 是 JavaScript 状态管理库，可以帮助你管理应用程序中的状态。它包含一个全局存储对象 Store，存储着应用程序中的所有状态，并提供了一组 API，让你可以在任何地方访问和修改 Store。Redux 的设计思想是单向数据流，通过 Actions 和 Reducers 来修改 Store 中的状态，从而更新应用程序中的组件。
Redux 的核心概念
在使用 Redux 之前，你需要了解以下三个核心概念：
- Actions：Actions 是一个 JavaScript 对象，用来描述发生了什么事情。例如，用户点击了一个按钮，这时就可以创建一个 Action 对象来表示这个事件。
- Reducers：Reducers 是一个函数，它负责处理在 Redux 中发生的各种 Actions，并返回一个新的 Store 对象。Reducers 函数需要接收两个参数：当前状态和 Action 对象，它需要根据 Action 对象来更新状态并返回新的状态。
- Store：Store 是一个全局的 JavaScript 对象，存储着 Redux 中的状态。它是不可变的，只能通过 Action 来修改。Store 还提供了一组 API，让你可以访问和修改 Store 中的状态。
集成 Redux 到 React.js 应用程序中
在集成 Redux 到 React.js 应用程序之前，你需要先安装 Redux 和 React-Redux 依赖包：
npm install redux react-redux --save
创建 Store
首先，我们需要创建 Redux 的 Store，并将其注入到 React 应用程序的根组件中。在 Redux 中，你需要创建一个 Reducers 函数来负责处理不同的 Actions，然后将其传给 Redux 的 createStore 函数来创建 Store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- -------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ----------------------在这个例子中，我们创建了一个简单的 Reducers 函数来处理两种不同的 Action：INCREMENT 和 DECREMENT。我们还定义了一个初始状态 initialState，其中包含一个 count 属性，初始值为 0。最后，我们使用 createStore 函数来创建 Store。
Provider 组件
接下来，我们将 Redux 的 Store 传递给 React 应用程序中的组件。这里我们可以使用 React-Redux 提供的 Provider 组件。
在 React 应用程序的根组件中，我们将 Provider 组件包裹在所有组件的外层。Provider 组件需要接收一个 store 属性，这个属性需要传递 Redux 的 Store 对象：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ ----- ---- ----------
------ --- ---- -------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--在这个例子中，我们导入了 Redux 的 Store 对象，然后将其传递给 Provider 组件的 store 属性中。然后，我们将 App 组件作为 Provider 的子节点渲染到页面中。
使用 connect 函数连接组件
现在，我们已经将 Redux 的 Store 注入到了 React 应用程序中，接下来需要将特定组件连接到 Store 中，从而让它们可以访问和修改 Store 中的状态。我们可以使用 React-Redux 提供的 connect 函数来实现这一点。
在组件中，我们使用 connect 函数来将组件与 Redux 的 Store 进行连接。这个函数接收两个参数：mapStateToProps 和 mapDispatchToProps。mapStateToProps 参数用于从 Store 中获取状态，并将其以 props 的形式传递给组件。mapDispatchToProps 用于将 Action 传递给 Store，从而更新状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
-------- -------------- -
------ -
-----
------- --------------------------------------------
------- --------------------------------------------
--------- -----------------
------
--
-
-------- ---------------------- -
------ -
------ ------------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
-
------ ------- ------------------------ -----------------------------在这个例子中，我们创建了一个 Counter 组件，使用 connect 函数将其与 Store 进行连接。我们使用 mapStateToProps 函数从 Store 中获取 count 属性，并将其以 props 的形式传递给组件。我们还使用 mapDispatchToProps 函数将 increment 和 decrement 两个 Action 传递给 Store。最后，我们使用 export default connect(mapStateToProps, mapDispatchToProps)(Counter) 将 Counter 组件连接到了 Store 中。
通过这种方式，我们就可以在组件中使用 Redux 状态管理了。当用户点击 Increment 或 Decrement 按钮时，我们会派发一个对应的 Action，然后 Reducers 函数会根据这个 Action 来更新 Store 中的状态。最后，React 自动重新渲染组件，从而显示最新的状态。
总结
通过本文的介绍，你应该已经了解了如何将 Redux 集成到 React.js 单页面应用程序中，许多应用程序都已经成功采用了这种技术。如果你正在开发 Web 应用程序，那么 Redux 可能会成为你提高代码可维护性和可扩展性的强大工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65a2b3d7add4f0e0ffacd178