Redux中使用replaceReducer加载异步reducer时触发多次调用的问题

看起来你遇到的问题核心在于用数组缓存Reducer的方式存在缺陷，以及对combineReducers的工作机制可能存在误解。咱们一步步拆解：

问题分析 #

你的代码里用数组reducers来缓存已加载的Reducer，每次添加新Reducer时通过Object.assign合并所有数组元素成一个对象。这里存在两个潜在问题：

1. 重复添加的风险：indexOf(reducer)依赖对象引用判断是否存在，如果异步加载的模块每次导出的是新的Reducer函数实例（比如模块热更新或者动态打包的情况），这个判断会失效，导致同一个逻辑的Reducer被多次添加到数组中。
2. combineReducers的正常行为：combineReducers生成的根Reducer在处理任何Action时，都会遍历所有子Reducer并调用它们——不管该Action是否被这个子Reducer处理。这是Redux的正常设计，目的是让每个子Reducer只负责自己的状态切片。如果你看到多个Reducer被调用，这本身不一定是bug，除非是同一个逻辑的Reducer被重复调用了多次。

解决方案 #

最可靠的方式是用对象而非数组来缓存Reducer，以唯一的状态切片key作为标识，这样可以精准控制每个Reducer的加载状态：

步骤1：初始化Store时维护Reducer对象 #

创建Store时，把初始Reducer存在一个对象里，同时挂载到Store上方便后续访问：

import { createStore, combineReducers } from 'redux';
import defaultReducer from './defaultReducer';

// 初始Reducer对象
const initialReducers = {
  // 你的初始Reducer，比如defaultReducer对应的key
  default: defaultReducer
};

const store = createStore(combineReducers(initialReducers));

// 把Reducer对象挂载到Store上，用于后续动态添加
store.reducers = { ...initialReducers };

步骤2：修改异步加载Reducer的逻辑 #

每次加载新的Reducer时，用唯一的key来判断是否已加载，然后更新Reducer对象并替换根Reducer：

// 假设异步加载的Reducer对应唯一的状态切片key
function addAsyncReducer(reducerKey, reducer) {
  // 避免重复添加，以及排除默认Reducer
  if (!store.reducers[reducerKey] && reducer !== store.reducers.default) {
    // 添加新的Reducer到缓存对象
    store.reducers[reducerKey] = reducer;
    // 重新合并并替换根Reducer
    store.replaceReducer(combineReducers(store.reducers));
  }
}

如果你的异步Reducer本身就是包含多个key的对象（比如一个模块导出多个Reducer），可以调整为遍历对象的key来添加：

function addAsyncReducers(newReducers) {
  let needReplace = false;
  Object.entries(newReducers).forEach(([key, reducer]) => {
    if (!store.reducers[key] && reducer !== store.reducers.default) {
      store.reducers[key] = reducer;
      needReplace = true;
    }
  });
  if (needReplace) {
    store.replaceReducer(combineReducers(store.reducers));
  }
}

关键说明 #

• 为什么用对象而不是数组？ 对象的key天然是唯一标识，能避免重复添加同一个逻辑的Reducer，也不用每次遍历数组做合并，效率更高。
• 关于Reducer多次调用：如果是不同状态切片的Reducer被调用，这是Redux的正常行为，无需担心——每个Reducer只会处理自己关心的Action，其他Action会直接返回原状态，不会影响性能。如果是同一个逻辑的Reducer被多次调用，那大概率是之前的数组缓存方式导致重复添加，用对象缓存就能解决。

内容的提问来源于stack exchange，提问作者wjlJack