redux-toolkit - 将项目添加到 redux-toolkit 中的嵌套数组

Question

Redux Toolkit 在尝试更新嵌套数组上的状态时给了我突变错误，我认为它是使用 immer 来解决这个问题并简化 reducer。

我的商店看起来像:

状态 -> 表单 -> 部分

我想向现有表单添加一个部分。

我的行动有一个形式和一个部分

reducer 看起来像

let intialState={
    forms:[]
}

const FormsReducer = createReducer(intialState, {
    ADD_SECTION: (state, action) => {
        const index = state.forms.findIndex(f => f.id === action.form.id);
        state.forms[index].__formSections.push(action.payload);
        },

A state mutation was detected inside a dispatch, in the path: FormsReducer.forms.0.__formSections.0

然而，根据 redux-toolkit 文档，应该可以“编写“可变的”不可变更新逻辑……

我做错了什么，我该如何解决？

Answer 1

如果您在不从 reducer 中变异的情况下返回它，则不会发生错误

const FormsReducer = createReducer(intialState, {
    ADD_SECTION: (state, action) => {
        const newstate = {...state}
        const index = newstate.forms.findIndex(f => f.id === action.form.id);
        newstate.forms[index].__formSections.push(action.payload);
        return newstate 
},