什么是 Redux
Redux 是一种 JavaScript 应用程序的状态容器，它可以管理应用程序的状态并控制它们是如何被处理的。Redux 非常适合于大型应用程序，因为它可以帮助开发者更好地组织和维护应用程序的代码。
在 Redux 中，数据流向是单向的：从视图（即用户操作）到 action，再到 reducer，最后到 store。下面就让我们逐一了解每一个流程。
数据流程
视图
Redux 数据流程的开始就是视图。视图层通过用户操作（例如按钮点击或者输入框输入）来发起一个 action。
action 是一个带有识别信息和有效载荷的 JavaScript 对象。它只描述了发生了什么，但是没有具体的实现。它们显示了一个事件所对应的类型，并且传递给 reducer 进行处理。
例如，当用户单击增加按钮：
----- -------------- - -- -- -
------ -
----- ----------------
-
-Action
Action 的主要目的是发出指令，改变状态（state）的唯一途径就是通过 dispatch 发布一个 action。
Action 只是一个描述文件，它描述了一个事件对于应用的状态改变。
对应的 reducer 就会根据这个 action 的 type，进行相应的状态的更新。
例如，在单击增加按钮时，将会执行 INCREASE_COUNT 的 action，这个 action 将告诉 reducer 状态要加 1：
Reducer
Reducer 是一个纯函数，它接受现有的状态和一个 action，然后返回新的状态。Reducer 的职责是处理 action 并更新应用程序的状态。
Reducer 将不同的 Action 分类进行处理，并通过返回新的状态来反馈给 Redux Store。
例如，当收到 INCREASE_COUNT action 时，reducer 将会让状态加 1：
----- ------------ - ------ - -- ------- -- -
------ ------------- -
---- -----------------
------ ----- - -
--------
------ -----
-
-Store
Store 将处理过的 state 保存，并在视图中被访问到。Action 是通过 Store.dispatch() 方法发起的，Store 将通过 Reducer 来更新应用程序的状态。Store 是纯粹的 JavaScript 对象，保存了应用程序的 state。
例如，将 countReducer 放入 Store 中：
------ - ----------- - ---- ------- ------ ------------ ---- ------------ ----- ----- - -------------------------
现在，我们已经在 Redux Store 中设置了状态，重要的是如何在项目中使用它。
应用状态的维护技巧
Redux 提供了一种可以管理应用的全局状态的约定方式，这使得你可以清楚的知道状态发生了什么，并且在整个应用程序中保持一致性。
避免过多的嵌套
当你使用一个庞大的 Redux 状态时，你可能会开始看到一些嵌套胡同。你可以使用分离的 reducer，但有时你需要管理并且更新多个数据源，这就是一个非常麻烦的问题。
例如，一个有人员组织结构的应用程序，我们需要保存每个雇员的详细信息和部门的详细信息：
----- ------------ - -
---------- -
-
----- -------
----------- --------
------ ------- ----- ----------
--
-
----- ------
----------- ----------
------ ---------- --------
-
--
------------ -
-
----- -------
--
-
----- ---------
-
-
-
----- ------------------- - ------ - ------------- ------- -- -
-- ---
-这将使状态看起来十分复杂，因此我们可以将每个子状态分成单独的 reducer。然后我们可以将它们组合成一个大型的 reducer，以帮助我们完成整个数据源的维护。
例如，我们可以将 reducer 拆分为3个子状态管理器：employees、departments 和 organization：
----- ---------------- - ------ - --- ------- -- -
------ ------------- -
---- ---------------
------ ---------- - --- ---------- ----------------- --
---- ------------------
------ -------------- -- ---- --- ----------
---- ------------------
------ ----------- -- ---- --- --------- - - ----- ----------------- - - --
--------
------ -----
-
-
----- ------------------ - ------ - --- ------- -- -
-- ---
-
----- ------------------- - -----------------
---------- -----------------
------------ ------------------
--现在，我们将 employeeReducer 独立作为一个子状态管理器，这使我们可以更好地维护员工信息的修改。同样，我们也可以更细致地管理部门信息的修改。
将状态进行拆分
如果你的状态看起来非常长，你可能想要考虑将它拆分成更小的子状态。
例如，我们的应用程序可能已经包含了几个状态：用户信息（User）、过滤器（Filter）、分页（Pagination）和 雇员信息（Employee）：
----- ------------ - -
----- ---
----------- ---
------- ---
--------- ---
-------- -
------ -----
--------- ----
-
-我们可以根据子状态的类型，将主状态分解成更多的子状态：
----- ----------- - ------ - --- ------- -- - ------- -
----- ----------------- - ------ - --- ------- -- - ------- -
----- ------------- - ------ - --- ------- -- - ------- -
----- --------------- - ------ - --- ------- -- - ------- -
----- -------------- - ------ - --- ------- -- -
------ ------------- -
---- ----------------
------ - --------- ------ ---- -
---- ----------------
------ - --------- ------ ----- -
---- --------------------
------ - --------- --------- ---- -
---- --------------------
------ - --------- --------- ----- -
--------
------ -----
-
-
----- ---------- - -----------------
----- ------------
----------- ------------------
------- --------------
--------- ----------------
-------- --------------
--这个方法可以减小代码的复杂度，也可以更好地管理和维护你的应用程序。
使用 combineReducers
combineReducers 负责将多个 reducer 合并成一个 reducer，它的核心工作是通过依次执行多个 reducer 并合并他们的结果。combineReducers 非常适合管理多种状态，例如上面提到的 User、Filter、Pagination 和 Employee。
例如，我们将 User、Filter 和 Employee 合并到一个 Reducer 中：
----- ---------- - ----------------- ----- ------------ ------- -------------- --------- --------------- --
我们已经按类型将大型的状态拆分成了多个子状态，现在我们可以使用 combineReducers() 函数即可将它们合并成一个单一的状态。
示例代码
以下是对应示例代码，基于这个示例，你可以更好地理解 Redux 数据流程：
------ - ------------ --------------- - ---- -------
-- -------
----- --------------- - -- -- --
----- ------------------
--
-- --------
----- -------------- - ------ - -- ------- -- -
------ ------------- -
---- -------------------
------ ----- - -
--------
------ -----
-
-
----- -------- - -----------------
-------- --------------
--
-- -----
----- ----- - ---------------------
-- --------- -- ----- -------
------------------ -- -
-----------------------------
--
-- -------- -------
---------------------------------
---------------------------------输出
- -
总结
Redux 是一个非常强大且灵活的状态容器。在实际项目使用中，当应用程序状态变得非常复杂时，应该进行状态拆分，并将其分为多个子状态管理器，这使得每个部分都能更好地聚焦于其任务。
重要的是，理解整个数据流程，这将使你在应用中更清晰地管理状态、更好地组织代码和更轻松地更新状态。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65a1d2d4add4f0e0ff9da372