Redux 是一个流行的 JavaScript 应用程序状态管理库，它可以帮助我们轻松地管理应用程序中的状态。Redux 的核心概念是 store、action 和 reducer。在这篇文章中，我们将讨论如何使用多个 reducer 和 combineReducers 来管理更复杂的应用程序状态。
Redux 的核心概念
在开始之前，让我们快速回顾一下 Redux 的核心概念。
Store
Store 是 Redux 中的中央状态管理器。它保存了应用程序的整个状态树，并且可以让我们更新状态。我们可以通过调用 store.getState() 来获取当前的状态，并且可以通过调用 store.dispatch(action) 来更新状态。
Action
Action 是一个简单的 JavaScript 对象，用于描述发生了什么。它必须包含一个 type 字段，用于指定操作的类型。我们可以通过调用 store.dispatch(action) 来触发一个 action。
Reducer
Reducer 是一个纯函数，它接受当前的状态和一个 action，并返回一个新的状态。在 Redux 中，所有的状态更新都是通过 reducer 来完成的。
多个 reducer
当应用程序变得更加复杂时，我们可能需要多个 reducer 来管理不同的部分状态。例如，我们可能需要一个 reducer 来管理用户信息，另一个 reducer 来管理购物车信息。
我们可以使用 combineReducers 函数来将多个 reducer 合并成一个更大的 reducer。combineReducers 接受一个对象作为参数，该对象的键是每个 reducer 管理的状态部分的名称，值是相应的 reducer 函数。
下面是一个示例，展示了如何使用多个 reducer 和 combineReducers：
-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
-- ---- -------
-------- ----------------- - --- ------- -
------ ------------- -
---- ---------------
------ - --------- --------- -------------- --
---- ------------
------ - --------- ------ -------------- --
--------
------ ------
-
-
-- ----- -------
-------- ----------------- - --- ------- -
------ ------------- -
---- -----------
------ ---------- ----------------
---- --------------
------ ----------------- -- ------- --- -------------------
--------
------ ------
-
-
-- --- ------- -------- -------
----- ----------- - -----------------
----- ------------
----- ------------
---
-- -- -----
----- ----- - -------------------------在上面的示例中，我们定义了两个 reducer：userReducer 和 cartReducer。userReducer 管理用户信息，cartReducer 管理购物车信息。然后，我们使用 combineReducers 函数将它们合并成一个更大的 reducer，该 reducer 管理整个应用程序的状态。
在组件中使用多个 reducer
一旦我们有了多个 reducer，我们就可以在组件中使用它们了。我们可以使用 useSelector 钩子来选择需要的状态，使用 useDispatch 钩子来分派 action。
下面是一个示例，展示了如何在 React 组件中使用多个 reducer：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------ ----------- - ---- --------------
-------- --------------- -
----- ---- - ----------------- -- ------------
----- -------- - --------------
-------- --------------------------- -
---------- ----- --------------- -------- ------------------ ---
-
-------- ------------------------ -
---------- ----- ------------ -------- ------------------ ---
-
------ -
-----
------ ----------- --------------------- ------------------------------- --
------ ----------- ------------------ ---------------------------- --
------
--
-
-------- --------------- -
----- ---- - ----------------- -- ------------
----- -------- - --------------
-------- ---------------------- -
---------- ----- -------------- -------- ---- ---
-
------ -
-----
----
-------------- -- -
--- --------------
----------- ------- ----------- -- ---------------------------------------
-----
---
-----
------
--
-在上面的示例中，我们定义了两个组件：UserComponent 和 CartComponent。UserComponent 使用 useSelector 钩子选择用户信息状态，并使用 useDispatch 钩子分派 SET_USERNAME 和 SET_EMAIL actions 来更新用户信息。CartComponent 使用 useSelector 钩子选择购物车信息状态，并使用 useDispatch 钩子分派 REMOVE_ITEM action 来移除购物车中的商品。
结论
在这篇文章中，我们讨论了如何使用多个 reducer 和 combineReducers 来管理更复杂的应用程序状态。我们还展示了如何在组件中使用多个 reducer。希望这篇文章对你有所帮助，让你更好地理解 Redux 的核心概念。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675808f35b8c5cbb5f7adb0c