前言
Redux 是一个 JavaScript 应用程序的状态容器，它可以让你更好地管理应用程序的状态。在 Redux 中，action 和 reducer 是两个非常重要的概念。它们是 Redux 的核心组成部分，也是 Redux 中最基本的模块。本文将从以下几个方面来介绍 action 和 reducer 的关系。
Redux 中的 action
在 Redux 中，action 是一个普通的 JavaScript 对象，它用来描述发生了什么事情。一个 action 对象通常包含两个属性：type 和 payload。
- type：表示 action 的类型，它是一个字符串常量，用来描述 action 的目的。
- payload：表示 action 的有效载荷，它是一个任意类型的值，用来描述 action 的具体内容。
下面是一个简单的 action 示例：
----- -------- - ----------
----- ------- - ------ -- -
------ -
----- ---------
-------- -
----
-
-
-上面的代码中，我们定义了一个 ADD_TODO 的常量，它代表了一个 action 的类型。我们还定义了一个 addTodo 函数，它返回了一个包含 type 和 payload 属性的对象。这个对象描述了一个添加待办事项的 action，payload 属性包含了待办事项的文本内容。
Redux 中的 reducer
在 Redux 中，reducer 是一个纯函数，它接收一个旧的 state 和一个 action，然后返回一个新的 state。reducer 的作用是根据 action 的类型来更新 state。
下面是一个简单的 reducer 示例：
----- ------------ - -
------ --
-
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
-
----- --------------------
---------- -----
-
-
-
--------
------ -----
-
-上面的代码中，我们定义了一个 initialState 对象，它包含了应用程序的初始状态。我们还定义了一个 reducer 函数，它接收一个 state 和一个 action，然后根据 action 的类型来更新 state。在这个例子中，我们只处理了 ADD_TODO 这个 action，它会向 todos 数组中添加一个新的待办事项。
Redux 中的 action 和 reducer 的关系
在 Redux 中，action 和 reducer 是紧密相关的。action 描述了发生了什么事情，reducer 根据 action 的类型来更新 state。在 Redux 的设计中，action 和 reducer 是一对多的关系。一个 action 可以被多个 reducer 处理，一个 reducer 也可以处理多个 action。这种一对多的关系是 Redux 中非常重要的设计思想，它让我们可以更好地组织应用程序的状态。
下面是一个示例，展示了如何在 Redux 中使用 action 和 reducer：
------ - ----------- - ---- -------
----- -------- - ----------
----- ------- - ------ -- -
------ -
----- ---------
-------- -
----
-
-
-
----- ------------ - -
------ --
-
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- ---------
------ -
---------
------ -
---------------
-
----- --------------------
---------- -----
-
-
-
--------
------ -----
-
-
----- ----- - --------------------
------------------ -- -
-----------------------------
--
-------------------------- --------上面的代码中，我们首先定义了一个 ADD_TODO 的常量和一个 addTodo 函数，它们用来创建一个添加待办事项的 action。然后我们定义了一个 reducer 函数，它根据 action 的类型来更新 state。最后我们使用 createStore 函数创建了一个 store 对象，并使用 subscribe 函数来监听 state 的变化。我们调用了 addTodo 函数来创建一个 ADD_TODO 类型的 action，并使用 store.dispatch 函数将这个 action 分发到 reducer 中。当 reducer 处理完这个 action 后，store 的状态会发生变化，subscribe 函数会被触发，我们可以在控制台中看到 store 的最新状态。
总结
在 Redux 中，action 和 reducer 是两个非常重要的概念。action 描述了发生了什么事情，reducer 根据 action 的类型来更新 state。在 Redux 的设计中，action 和 reducer 是一对多的关系。一个 action 可以被多个 reducer 处理，一个 reducer 也可以处理多个 action。这种一对多的关系是 Redux 中非常重要的设计思想，它让我们可以更好地组织应用程序的状态。在实际开发中，我们需要根据应用程序的需求来设计合适的 action 和 reducer，以便更好地管理应用程序的状态。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/660dff5ad10417a222e61fbf