React Redux Toolkit 一个 Reducer 中的多个状态更改答案

【问题标题】：React Redux Toolkit Multiple State Changes in One ReducerReact Redux Toolkit 一个 Reducer 中的多个状态更改
【发布时间】：2022-01-02 13:13:11
【问题描述】：

嘿，我仍然对 redux 工具包如何处理 reducer 中的状态分配感到困惑。

目前我正在尝试创建一个名称列表，用户可以在其中添加名称、删除名称和更新列表中的名称。一个示例数组如下：

[{id: "A1", name: "Bob"}, {id: "A2", name: "Joe"}, {id "A3", name: "Ray"}]

我正在尝试在我的 reducer 中创建一个删除操作，它通过索引从数组中删除一个元素，然后它会相应地更新数组中的所有 ID。因此，例如，如果我将“2”传递给操作，它将导致以下结果：

[{id: "A1", name: "Bob"}, {id "A2", name: "Ray"}]

带有“Joe”的元素将被删除，“Ray”的 id 将从“A3”更新为“A2”。

我试图弄清楚如何通过多个状态更改，因为我在尝试将我的状态分配给变量时不断遇到“immer”错误。我尝试了其他方法并使用过滤器，然后使用地图调整“id”，但它仍然不起作用。此外，如果我将这两个状态更改分成单独的减速器，它们将起作用。但是，当它们组合在一起时，它们不起作用。下面是我的代码：

export const namesListSlice = createSlice(
    initialState: [{ name: "namesList", initialState: [{id: "A1", name: "Bob"}, 
                   {id: "A2", name: "Joe"}, {id "A3", name: "Ray"}], 
    reducers: {
    
        removeName: (state, action) => {
            const filteredList = state.filter((list, index) => index !== 
                                            action.payload.index);
            return filteredList.map((item, index) => {
                item.id = "A" + (index + 1);
                return item;
            });
        }
    }
});

我应该如何进行两次更改状态以达到期望的结果？

【问题讨论】：

什么不起作用？
@yainspan 它给了我 immer 错误。错误：[Immer] 一个 immer 生产者返回了一个新值并修改了它的草稿。返回一个新值或修改草稿。

标签： reactjs react-redux redux-toolkit

【解决方案1】：

这就是错误所说的：您可以更改对象或返回新对象，但不能同时更改。

因此，在这种情况下，只需执行两者之一 - 在您的示例中，不进行突变可能是对代码更改较少的选择。

export const namesListSlice = createSlice(
    initialState: [{ name: "namesList", initialState: [{id: "A1", name: "Bob"}, 
                   {id: "A2", name: "Joe"}, {id "A3", name: "Ray"}], 
    reducers: {
    
        removeName: (state, action) => {
            const filteredList = state.filter((list, index) => index !== 
                                            action.payload.index);
            return filteredList.map((item, index) => {
                return { ...item, id: "A" + (index + 1) };
            });
        }
    }
});

【讨论】：