Redux 是一个流行的 JavaScript 应用程序库，它可被用于管理具有复杂状态的应用程序。Redux 通过将应用程序状态存储在单一不可变对象中来解决了许多开发人员经常遇到的问题。 本文将深度剖析 Redux 的核心概念：Action、Reducer、Store。
Action
Action 是一个描述应用程序状态变化的普通 JavaScript 对象。它包含一个 type 属性，这个属性指定了应用程序中会发生什么类型的事件（如 "ADD_TODO" 或 "DELETE_TODO"）。除了 type 属性外，Action 对象还可以包含关于事件的任何其他信息。例如，在一个添加待办事项的应用中，Action 可能看起来像这样：
-
----- -----------
-------- -
----- ------ ------
-
-在 Redux 中，Action 对象不会直接更新应用程序状态。相反，Redux 的更新是通过 Reducer 函数来执行的。
Reducer
Reducer 是一个纯函数，负责将当前应用程序状态和 Action 对象作为输入，并生成新的应用程序状态作为结果。Reducer 的输出状态必须是一个全新的对象，这个特性的保证整个数据流简单可控。Reducer 函数的签名通常如下所示：
------- ------- -- --------
一个简单的 Reducer 可能看起来像这样：
-------- -------------- - --- ------- -
------ ------------- -
---- -----------
----- -------- - - --------- ------ - --------------- -------------- - --
------ ---------
--------
------ ------
-
-在这个 Reducer 中，我们将待办事项附加到现有 todos 的末尾。如果没有相关 Action 被触发，则 Reducer 将返回当前应用程序状态。
Store
Store 是一个维护您应用程序所有状态的容器。它是 Redux 中的一个核心概念，将应用程序的可预测性提升到了更高的级别。有两种方法可以创建一个 Store，其中 createStore 方法是最常用的。一个简单的 Redux Store 可能看起来像这样：
------ - ----------- - ---- -------- ------ -------- ---- ---------------------- ----- ----- - ----------------------
在这个例子中，我们通过调用 createStore 方法来创建一个 Store。在 createStore 方法中，我们将 Reducer 函数传递给 Store。Store 将会负责持续地运行这个 Reducer，以确保它在应用程序状态发生变化时得到正确的更新。
示例代码
了解了 Redux 的核心概念后，我们可以使用示例代码来演示如何创建和操作 Store。下面的代码示例说明了如何添加待办事项到 Redux Store 中。
------ - ----------- - ---- --------
-------- ----------- - --- ------- -
------ ------------- -
---- -----------
------ -
---------
-
----- ------------
---------- -----
-
--
--------
------ ------
-
-
----- ----- - -------------------
----------------
----- -----------
----- ------ ------
---
------------------------------ -- -- ----- ------ ------- ---------- ----- --在这个示例中，我们首先创建了一个 Reducer 函数，它返回一个待办事项数组。当我们通过调用 createStore 方法创建一个 Store 时，我们将这个 Reducer 函数作为 createStore 方法的输入。然后我们使用 store.dispatch 方法来触发一个 ADD_TODO Action，从而向 Store 添加一个待办事项。最后，我们可以使用 store.getState 方法来检索当前应用程序状态，包括新添加的待办事项。
总结
通过深入分析 Redux 的核心概念 Action、Reducer、Store，我们能够了解 Redux 如何解决开发人员在管理复杂应用程序状态方面遇到的挑战。Redux 的简单性和可预测性使其成为开发大型应用程序的流行选择。使用它，开发人员可以更好地组织代码并更方便地管理应用程序状态。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6653eaddd3423812e487451d