使用Redux Toolkit构建React应用时Reducer无效错误排查

核心错误原因 #

你当前的slice代码导出的是整个loremSlice对象，但Redux需要的是slice内部的reducer函数。直接传递整个slice对象给combineReducers会导致Store无法识别有效的reducer，从而抛出错误。

修正步骤 #

1. 修改slice的导出代码 #

将slice文件的最后一行：

export default loremSlice; 

改为：

export default loremSlice.reducer; 

2. 确保Store配置正确（假设你用的是configureStore） #

你的Store配置文件应该类似这样，确保正确导入reducer并添加到reducer对象中：

import { configureStore } from '@reduxjs/toolkit';
import loremReducer from './path/to/your/loremSlice';

export const store = configureStore({
  reducer: {
    lorem: loremReducer, // 这里的key会作为state中的命名空间
  },
});

3. 优化App中的状态选择 #

App里的useSelector直接取整个state不太合理，应该根据Store里的命名空间获取对应的数据：

const lorem = useSelector((state) => state.lorem); // 对应Store里的lorem key

额外注意点 #

• createAsyncThunk的第一个参数建议加上slice的命名空间，比如"lorem/getLorems"，这样action类型更清晰，避免冲突。
• rejectWithValue需要用return返回，否则错误信息不会被正确传递：

catch (error) {
  return rejectWithValue(error.response);
}

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