在现代 Web 开发中，Single Page Application (SPA) 成为了一种主流的开发方式。它可以提高网站的速度和用户体验，同时也更加容易开发和维护。React.js 作为一种流行的前端框架，可以用于构建 SPA 应用。
不过，构建一个功能完备的 SPA 应用涉及到状态的管理。管理状态可能会变得非常复杂，这个时候就可以使用 Redux。Redux 是一个流行的 JavaScript 数据流管理库，可以帮助你更好地管理应用程序状态。Redux 的设计思想是将状态存储在一个单一对象中，该对象可以被全局访问并由一个函数组成。在这篇文章中，我们将讨论如何使用 React.js 和 Redux 组合来构建一个 SPA 应用。
建立 React 组件
建立 React 组件是构建 SPA 应用的第一步。一个 React 组件可以是一个按钮，一个表格，甚至可以是整个页面。组件接受传递给它的 props（属性）并返回一个 React 元素。在组件内部，我们可以使用 state（状态）来存储数据，以便在组件中管理和操作。
在这个例子中，我们将创建一个 Counter 组件。这个组件在单击按钮时会增加或减小计数器的值。以下是这个组件的代码：
-- -------------------- ---- -------
------ ----- ---- -------
----- ------- ------- --------------- -
------------------ -
------------
---------- - - ------ - -
-
----------- -
--------------- ------ ---------------- - - --
-
----------- -
--------------- ------ ---------------- - - --
-
-------- -
------ -
-----
---------- -----------------------
------- ----------- -- ------------------------------------
------- ----------- -- ------------------------------------
------
-
-
-
------ ------- --------使用 Redux 管理状态
接下来，我们将使用 Redux 来管理我们的状态。Redux 的核心概念是 store，它是一个拥有唯一状态的对象。你可以在整个应用程序中使用 store 来读取和修改状态。要创建 store，你需要使用 Redux createStore() 函数。在这个例子中，我们将使用 createStore() 创建一个 store 来管理我们的组件计数器状态。
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- ----- - ------------------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - -
---- ------------
------ - ------ ----------- - - -
--------
------ -----
-
--我们的 state 只包含一个 count 属性。我们创建了一个 reducer 函数，用于处理与状态相关的操作。我们的 reducer 接受两个参数，第一个参数是当前状态，第二个参数是要执行的操作。在这个例子中，我们只是检查来自 action 的类型并更新 count 属性。在这种情况下，我们可能有两个操作类型：INCREMENT 和 DECREMENT。
在这个时候，我们需要将我们的组件连接到我们的 store。我们将使用 React-Redux 库来为我们提供这个功能。让我们先安装这个库：
npm install react-redux --save
接下来，让我们创建一个包装我们的组件的高阶组件：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
----- ------- ------- --------------- -
----------- -
--------------------- ----- ----------- --
-
----------- -
--------------------- ----- ----------- --
-
-------- -
------ -
-----
---------- -----------------------
------- ----------- -- ------------------------------------
------- ----------- -- ------------------------------------
------
-
-
-
----- --------------- - ------- -- -
------ - ------ ----------- -
-
------ ------- ----------------------------------首先，我们导入 connect 函数。然后我们定义了 mapStateToProps 函数。这个函数负责将从 state 中选择我们需要的数据，然后将它们映射到我们的组件的 props 上。
我们传递 mapStateToProps 函数到 connect 中，这个 HOC 将包装我们的组件并将其连接到 Redux store。这个包装组件接受 state 和 dispatch 函数作为 props。
最后，我们可以在我们的组件中调用 props.dispatch() 函数来向我们的 store 发送一个 action。我们还使用 props.count 显示计数器的值。
结论
在这篇文章中，我们介绍了如何使用 Redux 来管理 React 应用程序的状态。我们首先创建了一个 Counter 组件，它是一个简单的计数器，然后使用 Redux 创建了一个 store 和 reducer 函数来管理它。最后，我们使用 React-Redux 中的 connect() 函数将我们的组件连接到我们的 store，以便我们可以从 store 中读取和修改状态。当用户单击增加或减少按钮时，我们的计数器实现了更新状态并反映在 UI 上的功能。
这篇文章只介绍了 Redux 的基本概念，你可以在 Redux 文档中学习更多高级用例，以及如何使用 Redux DevTools 调试你的应用程序。Happy coding!
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673080f0eedcc8a97c9218b1