Redux 是一个流行的 JavaScript 应用程序状态管理库，它被广泛使用于各种前端框架和项目中。Redux 使用单一的数据存储，称为 store，以管理应用程序状态。在 Redux 中，action 和 reducer 是核心概念之一。在本篇文章中，我们将深入探讨 action 和 reducer，并讲解它们如何协同工作来管理 Redux 应用程序状态。
action
在 Redux 中，action 是一个包含描述应用程序状态修改的数据对象。一个 action 通常会包含 type 属性和可选的 payload 属性。type 属性是一个字符串，用于描述该 action 要执行的操作类型。payload 属性则通常包含一些用于修改应用程序状态的数据。
下面是一个示例 action：
const incrementCounter = (amount = 1) => ({
type: 'INCREMENT_COUNTER',
payload: amount,
})上面的示例中，incrementCounter 是一个工厂函数，用于创建一个 INCREMENT_COUNTER 类型的 action，它可选的接受一个 amount 参数，该参数用于修改计数器的值。当调用该函数时，它将返回一个包含 type 和 payload 属性的对象。
reducer
在 Redux 中，reducer 是一个纯函数，它接受当前应用程序状态和一个 action，然后返回一个新的应用程序状态。reducer 的功能是根据 action 的 type 属性来修改应用程序状态。
下面是一个示例 reducer：
-- -------------------- ---- -------
----- -------------- - ------ - -- ------- -- -
------ ------------- -
---- --------------------
------ ----- - --------------
---- --------------------
------ ----- - --------------
--------
------ -----
-
-上面的示例中，counterReducer 是一个计数器 reducer。它接受一个 state 参数和一个 action 参数，并根据 action 的 type 属性来修改状态，然后返回新的状态。如果 action 的 type 是 INCREMENT_COUNTER，则返回 state 加上 action 的 payload 属性的值。如果 action 的 type 是 DECREMENT_COUNTER，则返回 state 减去 action 的 payload 属性的值。如果 action 的 type 不是上述的任何一种，则返回当前的状态。
如何协同工作？
在 Redux 应用程序中，action 提供了一个简单而清晰的接口，用于描述应用程序的状态修改。而 reducer 则根据 action 的 type 属性来修改应用程序状态。当一个 action 被分发到 Redux store 中时，reducer 将被调用，并根据 action 的 type 属性来计算新的应用程序状态。最后，Redux store 将包含新的应用程序状态，并将通知应用程序中的所有组件进行更新。
下面是一个示例代码，展示了如何在 Redux 应用程序中协同使用 action 和 reducer：
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- ---------------- - ------- - -- -- --
----- --------------------
-------- -------
--
----- -------------- - ------ - -- ------- -- -
------ ------------- -
---- --------------------
------ ----- - --------------
---- --------------------
------ ----- - --------------
--------
------ -----
-
-
----- ----- - ---------------------------
------------------ -- -
-------------------- ------- -------- -----------------
--
-----------------------------------
-----------------------------------
---------------- ----- -------------------- -------- - --
-- ------- ------- ------ -
-- ------- ------- ------ -
-- ------- ------- ------ -上面的示例中，我们定义了一个 incrementCounter action 和一个 counterReducer reducer。我们还使用 createStore 函数创建了一个 Redux store，并通过 subscribe 方法来监听 store 的更新事件。最后，我们使用 dispatch 方法分发了一些 action。每个 action 将触发 store 调用 reducer，并更新存储在 store 中的应用程序状态。我们还可以通过 getState 方法来获取 store 的当前状态，并使用 console.log 输出。
总结
在本文中，我们深入学习了 Redux 中的 action 和 reducer，并解释了它们如何协同工作来管理应用程序状态。正确理解 Redux 中的 action 和 reducer 对于开发高效的 Redux 应用程序至关重要。在实际开发中，我们应该熟练掌握 action 和 reducer 的概念，并学会如何在 Redux 应用程序中使用它们。本文所提供的示例代码可以帮助读者更好地理解 如何使用 Redux 中的 action 和 reducer。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c1c82a83d39b48815fc646