React Redux工具箱在一个还原器中进行多个状态更改

Question

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

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

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

我正试图在reducer中创建一个删除操作，通过索引从数组中删除一个元素，然后它会相应地更新数组中的所有ID。例如，如果我通过了"；2〃；它将导致以下结果：

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

具有"；乔；将被删除；Ray"；将被更新为"；A2〃；从"；A3"；。

我正试图弄清楚如何在不断遇到"；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;
            });
        }
    }
});

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

Answer 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) };
            });
        }
    }
});