Redux-toolkit报错求助：Store无有效reducer问题排查

常见原因及修复方案 #

1. 传递给combineReducers的对象存在无效值 #

• 检查传入combineReducers的对象，确保每个属性值都是合法的reducer函数（即接收state和action并返回新state的函数）。
• 常见错误：误传undefined、null或非函数值，比如直接传入slice对象而非slice.reducer。
  • 错误代码示例：

    import { combineReducers } from '@reduxjs/toolkit';
    import userSlice from './userSlice';
    
    // 错误：直接传slice对象，而非reducer
    const rootReducer = combineReducers({
      user: userSlice 
    });
    

  • 修复：

    const rootReducer = combineReducers({
      user: userSlice.reducer 
    });
    

2. 自定义reducer未正确定义 #

• 若自行编写reducer（非createSlice生成），需确保符合规范：必须是纯函数，接收state和action参数，不能返回undefined，初始state要合理设置。
  • 错误代码示例：

    // 错误：未返回初始state
    const counterReducer = (state, action) => {
      switch(action.type) {
        case 'increment':
          return state + 1;
        default:
          // 无返回值
      }
    };
    

  • 修复：

    const counterReducer = (state = 0, action) => {
      switch(action.type) {
        case 'increment':
          return state + 1;
        default:
          return state;
      }
    };
    

3. 使用configureStore时reducer配置错误 #

• 用configureStore时，reducer字段的对象属性值必须是合法reducer。若使用combineReducers生成根reducer，需确保生成过程无问题。
  • 错误代码示例：

    import { configureStore } from '@reduxjs/toolkit';
    
    // 错误：reducer字段值为无效值
    const store = configureStore({
      reducer: {
        user: undefined 
      }
    });
    

  • 修复：确保每个reducer都是有效函数。

4. 导入reducer时路径或名称错误 #

• 检查导入语句，确认导入的是reducer函数，而非其他导出项。注意匹配默认导出与命名导入的方式。
  • 错误代码示例：

    // userSlice.js中默认导出reducer
    export default userSlice.reducer;
    
    // 错误：用命名导入
    import { userReducer } from './userSlice';
    

  • 修复：

    import userReducer from './userSlice';
    

快速排查步骤 #

1. 定位创建根reducer或配置store的代码文件。
2. 打印传入combineReducers的对象，或configureStore的reducer字段值，检查每个属性的类型是否为function。
3. 逐一验证每个reducer函数的规范，重点检查初始state和返回值。

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