如何使用Redux combineReducers不新增现有Reducer层级？

要实现你期望的状态结构，有两种可行方式，具体取决于你现有reducer的组织形式：

方式一：拆分现有reducer的子逻辑（推荐） #

如果你的existingReducers原本就是由多个处理不同状态分支的子reducer组合而成（比如内部单独处理user、foo、bar的逻辑），最规范的做法是把这些子reducer单独导出，再和新reducer一起传给combineReducers：

1. 修改原reducer.js，把各个子reducer单独导出：

// reducer.js
// 处理user状态的子reducer
export function userReducer(state = { email: 'abc' }, action) {
  switch(action.type) {
    // 原有的user状态处理逻辑
    default: return state;
  }
}

// 处理foo状态的子reducer
export function fooReducer(state = {}, action) {
  switch(action.type) {
    // 原有的foo状态处理逻辑
    default: return state;
  }
}

// 处理bar状态的子reducer
export function barReducer(state = {}, action) {
  switch(action.type) {
    // 原有的bar状态处理逻辑
    default: return state;
  }
}

// 保留原有默认导出（可选，兼容旧代码）
export default function existingReducers(state = {}, action) {
  return {
    user: userReducer(state.user, action),
    foo: fooReducer(state.foo, action),
    bar: barReducer(state.bar, action)
  };
}

2. 在根reducer中组合所有子reducer：

import { combineReducers } from 'redux';
import { userReducer, fooReducer, barReducer } from './reducer';
import newReducer from './new-reducer';

const rootReducer = combineReducers({
  user: userReducer,
  foo: fooReducer,
  bar: barReducer,
  newReducer // 等价于 newReducer: newReducer
});

这样生成的状态结构完全符合预期，同时遵循Redux规范，后续新增reducer也能直接在combineReducers配置中添加。

方式二：手动合并状态（无需拆分现有reducer） #

如果你的existingReducers是无法拆分的单一函数（所有状态逻辑都写在一个函数里），可以写一个自定义根reducer，手动合并现有reducer和新reducer的处理结果：

import existingReducers from './reducer';
import newReducer from './new-reducer';

function rootReducer(state = {}, action) {
  // 让现有reducer处理它负责的状态分支
  const existingState = existingReducers(
    {
      user: state.user,
      foo: state.foo,
      bar: state.bar
    },
    action
  );
  // 让新reducer处理自己的状态分支
  const newStatePart = newReducer(state.newReducer, action);
  // 合并两部分状态
  return {
    ...existingState,
    newReducer: newStatePart
  };
}

这种方式不需要修改现有reducer代码，但后续新增其他reducer时，需要手动修改根reducer的合并逻辑，灵活性和规范性不如方式一。

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