Redux 是一个流行的 JavaScript 库，用于管理应用程序中的状态。它与 React 结合使用，可以构建可扩展且易于维护的应用程序。本文将介绍 Redux 的基础知识，并提供从基础到进阶的指导，让您能够更好地使用 Redux 构建 React 应用。
基础知识
Redux 的核心概念
Redux 的核心概念包括以下三个部分：
- Store：Redux 中的 Store 包含了应用程序的状态。它是一个 JavaScript 对象，保存了应用程序中的所有状态数据。
- Action：Action 是一个简单的 JavaScript 对象，包含了对应用程序状态的描述。它描述了应用程序中的事件，例如用户点击按钮或接收到服务器响应。每个 Action 必须包含一个 type 属性，用于指定事件类型。
- Reducer：Reducer 是一个函数，用于处理应用程序的状态。它接收当前状态和 Action 作为参数，并返回一个新的状态。Reducer 必须是一个纯函数，它不应该修改原始状态，而应该返回一个新的状态。
Redux 的工作流程
Redux 的工作流程包括以下四个步骤：
- 应用程序发送一个 Action。
- Redux 的 Store 接收到 Action，并将其发送给 Reducer。
- Reducer 处理 Action，并返回一个新的状态。
- 应用程序的视图根据新的状态进行更新。
Redux 的优点
使用 Redux 有以下几个优点：
- 易于管理状态：Redux 的 Store 可以保存应用程序中的所有状态数据，使得状态管理变得更加容易。
- 易于测试：由于 Redux 的状态是通过纯函数处理的，因此可以轻松地进行单元测试。
- 易于扩展：Redux 可以轻松地扩展到大型应用程序中，并且可以与其他库和框架进行集成。
进阶指导
安装 Redux
要使用 Redux，首先需要将其安装到项目中。可以使用 npm 或 yarn 进行安装：
npm install redux
或者
yarn add redux
创建 Store
在使用 Redux 之前，必须创建一个 Store。Store 是 Redux 中的核心概念，它保存了应用程序的状态。可以使用 createStore 函数来创建一个 Store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------在上面的示例中，我们创建了一个名为 count 的状态，并定义了两个 Action：INCREMENT 和 DECREMENT。当应用程序发送 INCREMENT Action 时，count 的值将增加 1；当应用程序发送 DECREMENT Action 时，count 的值将减少 1。
发送 Action
要发送一个 Action，可以使用 dispatch 函数：
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });在上面的示例中，我们向 Store 发送了两个 Action：INCREMENT 和 DECREMENT。
访问 Store 中的状态
要访问 Store 中的状态，可以使用 getState 函数：
const state = store.getState(); console.log(state.count);
在上面的示例中，我们获取了 Store 中的状态，并打印了 count 的值。
监听 Store 的变化
要监听 Store 的变化，可以使用 subscribe 函数：
store.subscribe(() => {
const state = store.getState();
console.log(state.count);
});在上面的示例中，我们使用 subscribe 函数监听 Store 的变化，并在每次变化时打印 count 的值。
示例代码
下面是一个完整的示例代码，展示了如何使用 Redux 构建一个计数器应用程序：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
----- ------- ------- --------------- -
--------- - -- -- -
---------------- ----- ----------- ---
--
--------- - -- -- -
---------------- ----- ----------- ---
--
-------- -
----- ----- - -----------------
------ -
-----
----------------
--------------------
------- -----------------------------------
------- -----------------------------------
------
--
-
-
-------- -------- -
------------------------ --- ---------------------------------
-
------------------------
---------在上面的示例中，我们使用 React 创建了一个计数器应用程序。当用户点击 + 按钮时，我们向 Store 发送 INCREMENT Action；当用户点击 - 按钮时，我们向 Store 发送 DECREMENT Action。每当 Store 的状态发生变化时，我们使用 subscribe 函数重新渲染应用程序。
结论
Redux 是一个强大的状态管理库，可以帮助您构建可扩展且易于维护的应用程序。本文介绍了 Redux 的基础知识，并提供了从基础到进阶的指导。希望这篇文章能够帮助您更好地使用 Redux 构建 React 应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6761d186856ee0c1d4fb6cfa