前言
在现代 Web 开发中，单页应用 (Single-page applications, SPA) 的开发越来越受到关注，因为它们提供了更流畅的用户体验，并且允许我们构建类似移动应用的交互式 Web 应用程序。React 是一个非常流行的 JavaScript 库，用于构建用户界面，而 Redux 是一个为 JavaScript 应用程序提供可预测性状态容器的库。React-Redux 是将这两个库结合在一起的工具箱，提供了一种使用 Redux 管理 React 应用程序状态的简单方法。
本文将介绍如何在 React SPA 应用中使用 React-Redux 实现数据管理。我们将探讨如何使用 Redux 存储和管理应用程序状态，如何使用 React-Redux 提供的 connect 方法连接 React 组件和 Redux 状态管理器，并提供实例代码帮助读者更好的理解这些概念。
状态管理与 Redux
Web 应用程序中，通常会有许多组件需要共享数据，例如用户登录信息、购物车内容、应用程序设置等。如果每个组件都有自己的状态来管理这些数据，就会变得非常混乱且难以维护。为了解决这个问题，Redux 诞生了。
Redux 是一个状态管理容器，它将应用程序状态存储在一个单一的、可预测的数据结构中，称为 Store。组件可以订阅 Store 中的状态，并且使用 Action 展示一个行为，以通知 Store 更新某个状态。Store 收到 Action 后，会根据情况对应更新状态，并通知所有订阅者状态的变化。
这种状态管理的方式具有以下优点：
- 状态存储在单一的数据结构中，易于管理和维护。
- 状态的变化可以被预测并追踪，易于调试。
- 状态是不可变的，数据的修改不会对其他部分造成不良影响。
使用 React-Redux 进行状态管理
React 组件通常需要访问应用程序状态来提供交互性和动态性。在 React 中进行状态管理的一个传统方式是使用 React 自带的状态 (state)。然而，当应用程序状态变得复杂时，使用本地 state 可能会变得非常困难。
React-Redux 提供了一个解决方案，将 Redux 状态管理器与 React 应用程序结合在一起。React-Redux 提供了一个名为 Provider 的组件，它允许 React 应用程序使用 Redux Store。combineReducers 方法可以将多个 Reducer 合并成一个 reducer，这是一种将状态存储到单个结构中的方式。
在 React-Redux 中，connect 方法使得 Redux 各部分能够与 React 组件进行连接，并从 Store 读取状态。它可以将 Redux Store 中的状态绑定到 React 组件的 props 上。这大大简化了组件代码并增加了复用性。
现在，我们基本上已经理解了 React-Redux 的基本工作原理。下面我们来看看如何在一个 React SPA 应用中使用 React-Redux 实现状态管理，首先我们需要安装必要的依赖：
$ npm install react-redux redux
创建 Redux Store
首先，我们需要创建一个新的 Redux Store 来存储应用程序状态。在实际应用中，我们可能需要在不同的文件中定义和导出多个 reducer。这些 reducers 将被 combineReducers 函数合并成一个 root reducer，然后传递给 createStore 函数来创建 Redux Store。
-- -------------------- ---- -------
-------------
----- --------- - -
------ --
--
----- ------------ - ------ - ---------- ------- -- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
--
------ ------- -----------------
------ -------------
---//store.js
import { createStore } from "redux";
import reducers from "./reducers";
const store = createStore(reducers);
export default store;在创建 Store 时，我们可以将 Store 传递给应用程序的 Provider，以便 React 组件访问 Store 中的状态。Provider 通过 store 属性接收一个 Store 对象。使用 Provider，我们不必将 Store 传递给每个单独的组件。这是因为 connect 方法可以让组件访问 Store 中的状态和派发（dispatch）操作。
创建 React 组件并连接至 Store
现在，我们需要控制 Count 组件的状态，我们可以使用 connect 方法将它连接到 Store 上，让组件可以读取和更新 Store 中的状态。首先，我们需要在 Count 组件中引用 connect 方法。然后，我们需要定义 mapStateToProps 和 mapDispatchToProps 方法来读取和更新状态。最后，我们需要将 Count 组件与 connect 方法一起导出。
-- -------------------- ---- -------
------ - ------- - ---- -------------
----- --------------- - ------- -- -
------ -
------ ------------
-
-
----- ------------------ - ---------- -- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
-
-
----- ----- - ------- -- -
------ -
-----
----------------------
------- --------------------------------------------
------- --------------------------------------------
------
-
-
------ ------- ------------------------ --------------------------connect 方法的第一个参数是 mapStateToProps 函数。这个函数告诉 connect 方法如何读取 Store 中的状态并将状态映射到组件的 props 上。在此例中，我们从 countReducer 中读取计数器的值，并将其映射到 Count 组件的 props 上。
第二个参数是 mapDispatchToProps 函数。此函数告诉 connect 方法如何向 Store 中派发 Action 以更新状态。在此例中，我们为组件的 increment 和 decrement 方法创建了 dispatch 调用。
传递 Store 给 Provider
为了将 Store 传递给 Provider 组件，我们需要在应用程序中使用 Provider 包装顶层组件。对于所有其他组件，无需从顶部将 Store 传递下去，而是从组件上方连接到 Store。
在 App.js 中更新代码如下：
-- -------------------- ---- -------
------ ----- ---- ----------
------ - -------- - ---- --------------
------ ----- ---- ----------
-------- ----- -
------ -
--------- --------------
---- ----------------
------ --
------
-----------
--
-
------ ------- ----总结
在本文中，我们介绍了如何在 React SPA 应用中使用 React-Redux 实现数据管理。React-Redux 可以作为 React 和 Redux 库之间的桥梁，简化了状态管理的过程，以及绑定组件和 Store 中的状态的过程。我们创建了一个简单的应用程序，其中包含了一个组件，用来展示能够计数。我们学习了如何创建 Store、Reducer 和 Action，以及如何使用 connect 方法绑定 Store 和 React 组件。学习这些概念后，您现在已经能够管理 React 应用程序的状态，并使用 React-Redux 更轻松地实现它们了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646e1123968c7c53b0ca6e3b