如何在Redux中合并两个配置不同的Store？

你不需要创建两个独立的Store，Redux本身就支持将多个reducer合并到单一Store中，同时整合所需的中间件配置。按以下步骤修改代码即可实现需求：

1. 合并所有Reducer到统一对象 #

把持久化处理后的authReducer、原有的globalReducer以及API reducer放在同一个reducer对象内：

const persistConfig = {key: "root", storage, version: 1};
// 为authReducer添加持久化包装
const persistedAuthReducer = persistReducer(persistConfig, authReducer);

// 合并所有业务reducer
const rootReducer = {
  auth: persistedAuthReducer, // 带持久化的auth模块
  global: globalReducer,
  [api.reducerPath]: api.reducer,
};

2. 配置单个Store，整合所有中间件 #

在configureStore中同时配置持久化所需的序列化忽略规则，以及API中间件：

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) => {
    // 先配置持久化需要的序列化检查忽略项
    const defaultMiddleware = getDefaultMiddleware({
      serializableCheck: {
        ignoreActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
      }
    });
    // 再拼接API中间件
    return defaultMiddleware.concat(api.middleware);
  }
});

setupListeners(store.dispatch);
// 创建持久化实例
const persistor = persistStore(store);

3. 用PersistGate包裹应用 #

最后在Provider中使用合并后的Store，并用PersistGate处理持久化数据的加载逻辑：

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

关键注意事项 #

• Redux应用应当只存在一个根Store，多个reducer通过合并方式加入，而非创建多个独立Store
• 中间件配置需同时覆盖持久化和API的需求，通过concat方法将API中间件追加到默认中间件队列后
• 持久化reducer只是根reducer中的一个子模块，无需单独创建Store

内容的提问来源于stack exchange，提问作者Богдан Шевченко