Redux 是一种用于管理前端应用程序状态的 JavaScript 库。它的思想基于 Flux 架构，可以使前端应用程序的状态管理更加清晰且易于维护。在 Redux 中，应用程序状态存在一个单一且可以预测的状态树中，而所有的状态变更均为纯函数操作。本文将详细介绍 Redux 中的基本概念和流程，包括 Action、Reducer 和 Store。
Action
在 Redux 中，Action 是一个描述状态变更的纯 JavaScript 对象，通常包含一个 type 属性和一些其他数据。它们所关联的操作会被发送到应用程序的 Store，由 Store 的 Reducer 函数处理。例如：
-- ---------- ------ ----- ---------------- - - ----- ------------------- --
通过传递 Action 对象以及相关参数，可以发出一个实际操作。例如：
-- -------------------- ------ ------ ---------------------------------
Reducer
Reducer 是一个纯函数，接收一个先前的状态和一个 Action 对象作为输入，生成一个新的状态作为输出。它不应该改变当前状态，而应该根据当前状态和 Action 描述的操作生成新状态。例如：
-- ------- -------
-------- -------------------- - - ------ - -- ------- -
------ ------------- -
---- --------------------
------ - ------ ----------- - - --
--------
------ ------
-
-在上面的示例中，counterReducer 接收当前的状态（默认为 { count: 0 }）和 Action 对象，并对传入的 Action 类型进行了检查。如果是 INCREMENT_COUNTER，它会返回一个新的状态对象，其中 count 的值递增 1。否则，它会返回当前状态。
Store
Store 是一个单一的 JavaScript 对象，表示整个应用程序的状态树。它包括了应用程序的当前状态、Reducer 函数以及其他一些用于管理状态树的方法。例如：
------ - ----------- - ---- -------- -- ----------- ------- - ----- --- ----- ----- - ----------------------------
在上面的示例中，我们通过 createStore 方法实例化了一个 Store，并将 counterReducer 作为唯一的 Reducer 传递给了它。这意味着，在应用程序中，所有状态的变更都将从 counterReducer 中获得处理。
派发 Action
通过 dispatch 方法，我们可以将 Action 对象发送到 Store 中：
---------------------------------
在接收到 Action 后，Store 将其传递给 Reducer 函数，并使用 Reducer 函数生成新的状态树。这整个过程是由 Store 通过调度机制异步执行的。
阻止和监听器
在 Redux 中，我们可以定义其他的 Reducer、中间件以及 Store 监听器，以保证状态树在不同的上下文中得到正确使用。例如：
-- -------- -------
-------- ------------------ ------- -
------ -
------ --------------------------- --------
--------- --------------------------- -------
--
-
-- -------------- ------
----- ------------- - -- -------- -- -- ---- -- ------ -- -
-- ------------ --- -------------- -
-----------------
-------------- -- ---------- ----- --------------- -------- -------- ---
------------ -- ---------- ----- ------------ ----- ----
-
------ -------------
--
-- --- -------------- ------- -----
----- ----- - ------------------------ --------------------------------
-- - ----- -----------------
------------------ -- -------------------------------上述示例中，我们定义了一个更加复杂的 rootReducer，将 counterReducer 和 userReducer 合并到了一起。同时，我们还定义了一个中间件 apiMiddleware，用于处理一些异步请求的 Action。最后，我们使用 subscribe 方法监听了 Store 中状态的变更，每次状态变更时都将其打印到控制台上。
结论
通过本文的介绍，我们了解了 Redux 的基本概念和流程，包括 Action、Reducer 和 Store。它们共同构成了应用程序的状态树，是 Redux 数据流的关键部分。理解 Redux 的基本原理和工作方式将有助于我们更好地编写可靠的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673079adeedcc8a97c9202d5