Redux 简介
Redux 是一种 JavaScript 状态容器，用于管理 Web 应用程序中的状态。它被设计用于与 React 一起使用，但也可以与其他 UI 库一起使用。Redux 旨在让状态变得可预测、可测试，并易于开发和调试。
Redux 实现了一个单向数据流，其中 action 和 reducer 是核心概念。在这篇文章中，我们将深入介绍 action 和 reducer 的作用和用法。
Action
在 Redux 中，action 是一个 JavaScript 对象，描述对状态进行更改的意图。每个 action 都必须有一个类型（type）属性，以便 reducer 知道要如何处理它。
以下是一个 action 的示例：
{
type: 'ADD_TODO',
payload: {
text: 'Buy milk',
completed: false
}
}在这个示例中，action 的类型为 ADD_TODO，它的 payload 属性包含要添加到任务列表中的详细信息。
可以使用 action 创建函数（action creator）来创建 action。action 创建函数是一个返回 action 对象的函数，它可以接受参数并在需要时生成相应的 action。
以下是一个简单的示例 action 创建函数：
-- -------------------- ---- -------
-------- ------------- -
------ -
----- -----------
-------- -
----- -----
---------- -----
-
-
-在这个示例中，addTodo 是一个 action 创建函数，它接受一个文本参数，并生成一个带有该文本的 ADD_TODO action。
Reducer
在 Redux 中，reducer 是一个纯函数，它接受当前状态和一个 action，然后返回一个新状态。reducer 的任务是根据 action 的类型来更新状态，并返回更新后的状态。
以下是一个 reducer 的示例：
-- -------------------- ---- -------
-------- ----------- - --- ------- -
------ ------------- -
---- -----------
------ ---------- ---------------
---- --------------
------ -------------- --
------- --- -------------- - - -------- ---------- --------------- - - ----
-
--------
------ -----
-
-在这个示例中，todos 是一个 reducer 函数，它根据不同的 action 类型来更新状态。如果 action 的类型是 ADD_TODO，它会在当前状态后面添加一个新的任务；如果 action 的类型是 TOGGLE_TODO，它会切换任务的完成状态。
Redux 工作流程
在 Redux 中，应用程序的状态被存储在一个单一的 store 中。要更改状态，必须分发一个 action，它会经过所有的 reducers，并返回一个新的状态。
以下是 Redux 工作流程的示意图：
- Store: 存储整个应用程序的状态。
- Action: 描述对状态进行更改的意图。
- Reducer：纯函数，根据 action 的类型来更新状态。
- View: 显示当前状态，并向 store 分发 action 以触发状态更改。
案例应用
下面是一个使用 Redux 的简单任务列表应用程序的示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- ------------ - -
------ --
-
-------- ----------- - ------------------- ------- -
------ ------------- -
---- -----------
------ ---------- ---------------
---- --------------
------ -------------- --
------- --- -------------- - - -------- ---------- --------------- - - ----
-
--------
------ -----
-
-
----- ----- - ------------------
-------- ------------- -
------ -
----- -----------
-------- -
----- -----
---------- -----
-
-
-
-------- -------------- -
------ -
----- --------------
-------- --
-
-
--------------------------- -------
---------------------------- --- ------
-----------------------------在这个示例中，我们首先创建一个 store，并将 todos reducer 注入其中。然后我们创建两个 action 创建函数，addTodo 和 toggleTodo，它们用于向 store 分发 action。最后，我们依次分发三个 action：addTodo（'Buy milk'）、addTodo（'Walk the dog'）和 toggleTodo（0）。
当我们分发 addTodo（'Buy milk'）时，todos reducer 会将这个新任务添加到列表的末尾。当我们分发 addTodo（'Walk the dog'）时，它会将一个新任务添加到列表的末尾。当我们分发 toggleTodo（0）时，它会切换任务的完成状态。
总结
Redux 提供了一种可预测、可测试和易于调试的状态管理方案。它的核心概念是 action 和 reducer。action 描述了对状态进行更改的意图，而 reducer 根据 action 的类型来更新状态。在使用 Redux 时，我们应该始终将状态存储在一个单一的 store 中，以确保状态的一致性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64993eb448841e98946385ce