Redux-toolkit 通过覆盖字段与返回不可变更新值来“改变”对象

Question

我是 react 和 redux-toolkit 的新手。当我浏览 redux-toolkit 使用指南 (https://redux-toolkit.js.org/usage/usage-guide) 时，我发现我可以“改变”对象或返回一个不可变更新的值。但是，当它们实际上表现不同时，我感到困惑。

这是我的 todoSlice

const todoSlice = createSlice({
name: 'todo',
initialState:{
    todoArray: [],
},
reducers: {
    addTodo(state, action) {
        state.todoArray.push({ id: new Date().toISOString(), content: action.payload });
    },
    removeTodoMutate(state, action) {
        state.todoArray =  state.todoArray.filter((todo) => todo.id !== action.payload);
    },
    removeTodoWithImmutably(state, action) {//NOT WORKING
        return state.todoArray.filter((todo) => todo.id !== action.payload);
    }
},});

这是我的待办事项列表

const TodoList = () => {
const listOfTodos = useSelector(state => state.todo.todoArray);
return (
<div>
    { listOfTodos && listOfTodos.length > 0 && (listOfTodos.map((todo) => (
         <TodoItem key={todo.id} id={todo.id} todoContent={todo.content} />
    )))}
    {!listOfTodos || listOfTodos.length === 0  && (<h1>No Items</h1>)}
</div>
);};

这是我的 TodoItem

const TodoItem = (props) => {
const dispatch = useDispatch();
const deleteClickHandler = () => {
    dispatch(removeTodoWithImmutably(props.id));
}
return (
<div>
    <h2>
        {props.todoContent} 
        <button onClick={deleteClickHandler}>DELETE</button>
    </h2>
</div>);};

问题是 todoSlice 中有两个 removeTodo reducer，removeTodoMutate 可以正常工作，一旦我触发操作，removeTodoWithImmutably 会清除整个 TodoList。当我检查 redux devtool 时，触发了正确的操作，并且正确更改了状态。

谁能向我解释为什么会发生这种情况？谢谢。

Answer 1

您的removeTodoWithImmutably 正在改变状态形状本身。

之前，您的状态具有形状 { todoArray: [ ... ] }，但随后您返回形状为 [ ... ] 的新状态。

所以，而不是

    return state.todoArray.filter((todo) => todo.id !== action.payload);

做

    return { todoArray: state.todoArray.filter((todo) => todo.id !== action.payload) };

一般情况下，请阅读https://redux-toolkit.js.org/usage/immer-reducers。