Redux 中如何实现多个 reducer
在使用 Redux 进行状态管理时，我们经常需要实现多个 reducer 来管理不同状态之间的变化。本文将介绍如何在 Redux 中实现多个 reducer，包括如何将它们组合起来。
什么是 reducer
Reducer 是 Redux 中的一个重要概念，负责处理应用程序的状态变化。Redux 中的状态被存储在一个全局的 store 对象中，由于状态无法直接被改变，因此需要通过 action 触发 reducer 来对状态进行更新。
Reducer 对一个 state 对象进行操作，接收两个参数：当前状态和一个 action。根据 action 的类型，Reducer 会返回一个新的状态。下面是一个简单的 reducer 示例：
----- ------------ - - ------ - -
-------- -------------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - -
---- ------------
------ - --------- ------ ----------- - - -
--------
------ -----
-
-上面的代码示例定义了一个名为 counterReducer 的 reducer，它接收一个名为 state 的对象和一个名为 action 的对象。如果 action 的类型是 INCREMENT，则返回一个新的状态对象，其中 count 属性加 1，如果 action 的类型是 DECREMENT，则返回一个新的状态对象，其中 count 属性减 1，如果 action 的类型未知，则返回当前状态。
如何实现多个 reducer
在实际的项目中，我们通常需要管理多个与应用程序相关的状态，因此需要多个 reducer 来分别处理这些状态的变化。Redux 提供了一个 combineReducers 函数来帮助我们将多个 reducer 组合成一个根 reducer。
combineReducers 函数接收一个对象参数，其中包含多个 reducer。这些 reducer 将各自处理不同的状态，并将结果组合成一个对象，作为应用的整体状态。下面是一个简单的示例：
------ - --------------- - ---- ------- ------ -------------- ---- ------------------ ------ ----------- ---- --------------- ----- ----------- - ----------------- -------- --------------- ----- ----------- -- ------ ------- -----------
上面的代码示例中，我们通过调用 combineReducers 函数将名为 counterReducer 和 userReducer 的两个 reducer 组合成一个 rootReducer。我们可以使用这个 rootReducer 来作为应用程序的根 reducer。
增强器 (middlewares)
增强器是 Redux 中的另一个重要概念，它用于增强 store 的功能。通过使用增强器，我们可以给 store 添加额外的功能，例如异步操作、日志记录等等。Redux 提供了一个 applyMiddleware 函数来支持增强器。
applyMiddleware 函数接收一个或多个增强器，返回一个函数。这个函数接收 createStore 函数作为参数，并返回一个新的增强版 createStore 函数。下面是一个简单的示例：
------ - ------------ --------------- - ---- ------- ------ ----------- ---- ------------ ----- ------ - ----- -- ---- -- ------ -- - -------------------------- ------- ----- ------ - ------------ ----------------- ------- ----------------- ------ ------ - ----- ----- - ------------------------ ------------------------
上面的代码示例中，我们定义了一个 logger 增强器，并通过 applyMiddleware 函数将它应用到 store 中。这个 logger 增强器用于记录每次 action 的类型以及导致状态更改后的新状态。
总结
本文介绍了如何在 Redux 中实现多个 reducer，并将它们组合为一个根 reducer。我们还介绍了增强器的概念，它可以为 store 添加额外的功能。对于需要管理多个状态的应用程序，这些知识点都是非常重要的。在日常开发中，我们可以使用 combineReducers 和 applyMiddleware 等函数来更加便捷地实现 Redux 的状态管理。
示例代码
下面是一个示例，展示了如何在 Redux 中创建多个 reducer，并使用 combineReducers 和 applyMiddleware 将它们组合起来：
------ - ------------ ---------------- --------------- - ---- -------
-- ---- -------
----- ------------ - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ ----- - -
---- ------------
------ ----- - -
--------
------ -----
-
-
----- ----------- - ------ - ----- ------- -- -
------ ------------- -
---- --------
------ --------------
---- ---------
------ ----
--------
------ -----
-
-
-- --- ------- ------ -------
----- ----------- - -----------------
------ -------------
----- -----------
--
-- -------
----- ------ - ----- -- ---- -- ------ -- -
-------------------------- -------
----- ------ - ------------
----------------- ------- -----------------
------ ------
-
-- -- ----- -------------- ----- -
----- ----- - ------------------------ ------------------------
-- ---------- ------
---------------- ----- ----------- --
-- ----------- ------
---------------- ----- -------- -------- - ----- ------- - --来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654dee947d4982a6eb74a79c