使用createReducer与combineReducer向数组推送状态的问题求助

核心问题 #

你的代码存在两个关键错误，导致Redux DevTools无状态更新显示：

1. profileReducer直接修改原状态数组 #

state.push(profile)会直接修改原数组，违反Redux不可变更新原则，Redux无法检测到状态变化。即使Redux Toolkit支持Immer，这种直接mutate的操作也无法触发状态更新的监听。

2. gradeReducer存在语法错误 #

回调函数里的grade是未定义变量，属于笔误，同时没有实现正确的grades更新逻辑。

修复后的代码 #

profileReducer修复 #

export const profileReducer = createReducer(
    initialState.student.details.profile,
    on(updateProfile, (state, { profile }) => {
        // 返回新数组，保持状态不可变性
        return [...state, profile];
    })
);

gradeReducer修复（以添加新成绩为例，可根据需求调整） #

export const gradeReducer = createReducer(
    initialState.student.details.grades,
    on(upgradeGrade, (state, { grades }) => {
        // 按需求更新，比如添加新成绩到数组
        return [...state, grades];
        // 如果是替换整个成绩数组，直接return grades;
    })
);

rootReducer保留原结构 #

export const rootReducer = combineReducers({
   profile: profileReducer,
   grades: gradeReducer
})

额外检查项 #

• 确认updateProfile和upgradeGrade这两个action creator已正确定义，且在组件中通过dispatch触发。
• 确认store使用Redux Toolkit的configureStore创建（默认已集成DevTools），而非传统的createStore。

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