Redux 是一个广泛使用的 JavaScript 应用程序状态管理库。它使用单一的全局状态存储来管理整个应用程序的状态，这个状态是只读的，只能通过纯函数来更新。Redux 的一个关键概念是 reducer，它是一个纯函数，用于根据当前状态和操作来计算新状态。在 Redux 中，通常会使用多个 reducer 来管理不同部分的状态。但是，使用多个 reducer 时，会出现状态同步的问题，本文将介绍如何处理这个问题。
问题描述
假设我们有两个 reducer，一个用于管理用户信息，一个用于管理购物车信息。当用户添加商品到购物车时，我们需要更新用户信息中的购物车信息。这时候，我们就需要在两个 reducer 中进行状态同步。
处理方法
方法一：使用 combineReducers 函数
Redux 提供了一个 combineReducers 函数，可以将多个 reducer 合并成一个 reducer。当一个 action 被分发时，combineReducers 函数会将这个 action 传递给每个 reducer，并将它们的返回值合并成一个新状态。
-- -------------------- ---- -------
------ - --------------- - ---- --------
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- --------------
------ -
---------
------------------
--
--------
------ ------
-
--
----- ----------- - ------ - --- ------- -- -
------ ------------- -
---- -----------
------ -
---------
------ ---------------- ----------------
--
--------
------ ------
-
--
----- ----------- - -----------------
----- ------------
----- ------------
---
------ ------- ------------在上面的代码中，我们将两个 reducer 合并成一个 rootReducer，并将其导出。现在，我们可以在组件中使用 rootReducer，而不需要关心用户信息和购物车信息的状态同步问题。
方法二：使用中间件
Redux 还提供了一个中间件机制，可以在 action 被分发到 reducer 之前进行处理。我们可以编写一个中间件来处理状态同步问题。
-- -------------------- ---- -------
----- -------------- - -- -------- -- -- ------ -- -------- -- -
----- ------ - -------------
-- ------------ --- ----------- -
----- - ----- ---- - - -----------
----- ----------- - -
--------
-----
--
----------
----- --------------
-------- ------------
---
-
------ -------
--在上面的代码中，我们编写了一个 syncMiddleware 中间件。当一个 ADD_ITEM action 被分发时，syncMiddleware 中间件会获取当前的 user 和 cart 状态，并将它们合并成一个新的 updatedUser 状态。然后，它会分发一个 UPDATE_USER action，将 updatedUser 状态更新到 userReducer 中。
最后，我们需要将 syncMiddleware 中间件添加到 Redux store 中：
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import syncMiddleware from './middlewares/syncMiddleware';
const store = createStore(rootReducer, applyMiddleware(syncMiddleware));现在，我们可以在组件中分发 ADD_ITEM action，而不需要关心状态同步问题。
总结
在 Redux 中，使用多个 reducer 时，可能会出现状态同步的问题。我们可以使用 combineReducers 函数或编写中间件来处理这个问题。使用 combineReducers 函数可以将多个 reducer 合并成一个 reducer，而使用中间件可以在 action 被分发到 reducer 之前进行处理。无论使用哪种方法，我们都应该尽量避免在 reducer 中处理异步操作，以保持 reducer 的纯函数特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660caa5ed10417a222cf7910