如何结合旧reducer使用createReducer？求旧reducer迁移的渐进方案

其实你完全可以通过组合reducer的方式，同时保留旧的传统reducer和用createReducer创建的新逻辑，既能用新写法添加状态变更，又能平稳完成逐步迁移，具体步骤如下：

1. 先实现你的新createReducer逻辑 #

假设你原本有处理某个模块的旧reducer，现在想用createReducer新增另一个模块的状态管理，比如新增用户状态逻辑：

import { createReducer } from '@reduxjs/toolkit';

// 用createReducer编写的新状态逻辑
const userReducer = createReducer(
  { name: '', isLoggedIn: false }, // 初始状态
  {
    ['SET_USER_INFO']: (state, action) => {
      // 直接修改状态，Redux Toolkit的Immer会帮你处理不可变更新
      state.name = action.payload.name;
      state.isLoggedIn = true;
    },
    ['USER_LOGOUT']: (state) => {
      state.name = '';
      state.isLoggedIn = false;
    }
  }
);

2. 保留你的旧Reducer代码 #

不用着急改写旧逻辑，先原样保留，比如原来的计数器reducer：

// 传统写法的旧reducer
const counterReducer = (state = { count: 0 }, action) => {
  switch(action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

3. 用combineReducers合并两个reducer #

Redux Toolkit自带的combineReducers（和Redux核心库的功能一致）可以把多个reducer合并成根reducer，让它们各自管理状态树的不同分支：

import { combineReducers } from '@reduxjs/toolkit';

const rootReducer = combineReducers({
  counter: counterReducer, // 旧逻辑保留在counter分支
  user: userReducer        // 新逻辑放在user分支
});

export default rootReducer;

这样你的store就能同时处理旧的计数器状态和新的用户状态，两者完全独立、互不影响。

4. 逐步迁移旧Reducer到createReducer #

等你有时间的时候，可以把旧reducer的逻辑一点点迁移到createReducer写法，比如先改一个case：

// 逐步迁移后的counterReducer
const counterReducer = createReducer({ count: 0 }, {
  ['INCREMENT']: (state) => {
    state.count += 1; // 用Immer的可变写法更简洁
  },
  // 暂时保留switch处理剩余case，之后再慢慢迁移
  default: (state, action) => {
    switch(action.type) {
      case 'DECREMENT':
        return { ...state, count: state.count - 1 };
      default:
        return state;
    }
  }
});

等所有case都迁移完成后，就可以完全删掉旧的switch逻辑了。

额外小技巧：搭配createAction更规范 #

如果用Redux Toolkit的createAction生成action creators，代码会更整洁，也能避免手写action type的拼写错误：

import { createReducer, createAction } from '@reduxjs/toolkit';

// 生成action creators
const increment = createAction('INCREMENT');
const decrement = createAction('DECREMENT');

// 直接用action creator作为key
const counterReducer = createReducer({ count: 0 }, {
  [increment]: (state) => { state.count += 1 },
  [decrement]: (state) => { state.count -= 1 }
});

之后在组件里直接调用dispatch(increment())即可，不用手动构建action对象。

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