在 Redux 中，Reducer 负责管理和维护应用程序的状态。单个 Reducer 通常只能处理一个状态片段，而且随着应用程序的增长，它的复杂度会不断增加。如果你的应用程序有许多状态片段，你需要使用多个文件来组织你的 Reducer。
如何实现多文件 Reducer，使其能够优雅地组织和管理你的状态片段？本文将为你详细介绍。
创建多文件 Reducer
要创建一个多文件 Reducer，首先需要拆分你的状态片段。每个状态片段应该对应一个单独的 Reducer 文件。
例如，假设我们正在构建一个应用程序，并需要管理用户信息和购物车信息两个状态片段。我们可以创建一个名为 user.js 的文件和一个名为 cart.js 的文件。
user.js：
-- -------------------- ---- -------
----- ------------ - -
----- ---
------ ---
--
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- -----------
------ - --------- ----- -------------- --
---- ------------
------ - --------- ------ -------------- --
--------
------ ------
-
-cart.js：
-- -------------------- ---- -------
----- ------------ - -
------ ---
--
------ ------- -------- ----------------- - ------------- ------- -
------ ------------- -
---- --------------
------ - --------- ------ ---------------- --------------- --
---- -------------------
------ -
---------
------ ------------------------- -- ------- --- ----------------
--
--------
------ ------
-
-现在，我们需要将这两个 Reducer 文件组合成一个单一的 Reducer。我们将使用 Redux 提供的 combineReducers 函数，它接收一个对象，并将每个 Reducer 子状态映射到最终的状态树。
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ ----------- ---- --------- ------ ----------- ---- --------- ----- ----------- - ----------------- ----- ------------ ----- ------------ --- ------ ------- ------------
这样，Redux 就可以将多个 Reducer 状态片段合并为一个完整的应用程序状态树。
示例：使用多文件 Reducer 管理状态
现在，我们准备使用上面的示例来演示如何使用多文件 Reducer 管理我们的应用程序状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ----------- ---- -------------
------ ---- ---- --------------------
------ ---- ---- --------------------
----- ----- - -------------------------
-------- ----- -
------ -
--------- --------------
----- --
----- --
-----------
--
-
------ ------- ----在上面的代码中，我们使用 combineReducers 函数将我们的多个 Reducer 剪成一个。然后，我们创建一个 store 并将其提供给 Provider。
接下来，我们将创建两个 React 组件，User 和 Cart, 并将它们封装在 Provider 中使它们和 store 连接。
User 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
-------- ------ -
----- ---- - ------------------- -- ------------
----- -------- - --------------
----- ---------------- - ------- --
---------- ----- ----------- -------- ------------------ ---
----- ----------------- - ------- --
---------- ----- ------------ -------- ------------------ ---
------ -
-----
-------------
------ ----------------- --------------------------- --
------ ------------------ ---------------------------- --
------
--
-
------ ------- -----Cart 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
-------- ------ -
----- ---- - ------------------- -- ------------
----- -------- - --------------
----- ------------- - -- --
---------- ----- -------------- -------- - --- ---------- - ---
----- ---------------- - ---- --
---------- ----- ------------------- -------- -- ---
------ -
-----
-------------
------- --------------------------- -------------
----
---------------------- -- -
--- --------------
---------
------- ----------- -- ------------------------------------------
-----
---
-----
------
--
-
------ ------- -----在上述代码中，我们使用了 React-Redux 库提供的两个 Hook：useSelector 和 useDispatch。useSelector 用于检索 Redux state。我们可以将其与一个选择器函数一起使用，以从 state 中提取所需的子部分。
useDispatch 用于调度 Redux 动作。我们可以将其用来触发一个对象事件并将其分派给 Redux。
结论
在本文中，我们介绍了如何在 Redux 中实现多文件 Reducer。我们研究了如何拆分我们的状态片段并将它们组合成一个完整的应用程序状态树。我们还提供了一个示例，以演示如何将多个 Reducer 放在一起使用。希望这篇文章能够帮助你更好地组织和管理你的 Redux 状态。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6714a946ad1e889fe214dd9c