状态更新时 Redux 工具包报错答案

【问题标题】：Redux toolkit gives an error when state is updated状态更新时 Redux 工具包报错
【发布时间】：2023-01-16 22:39:17
【问题描述】：

const initialState: TaskState = {
  tasks: [],
};

export const taskSlice = createSlice({
  name: "task",
  initialState,
  reducers: {
    addTask: (state, action: PayloadAction<localTask>) => {
      state.tasks.push(action.payload);
    },
    removeTask: (state, action: PayloadAction<localTask>) => {
      state.tasks = state.tasks.filter((item) => item.id !== action.payload.id);
    },
    updateTask: (state, action: PayloadAction<localTask>) => {
      state.tasks.map((task) => {
        if (task.id === action.payload.id) {
          task.title = action.payload.title;
          task.description = action.payload.description;
        }
      });
    },
  },
});

分派 updateTask 时，此切片会发出警告：

Warning: An unhandled error was caught from submitForm() [Error: Invariant failed: A state mutation was detected between dispatches, in the path 'task.tasks.3.description'. This may cause incorrect behavior. (https://redux.js.org/style-guide/style-guide#do-not-mutate-state)]

你能帮我解决这个问题吗？提前致谢。

我尝试了几种方法，包括从 reducer 函数返回新的状态对象，但没有任何运气。

【问题讨论】：

出现此警告是因为您直接更新状态。您需要创建状态的副本，编辑它然后设置新状态
Redux 工具包 uses immer，它可以防止 reducers 中的状态突变，并允许您实际安全地使用突变语法。这意味着突变可能发生在组件代码中的 reducers 之外。

标签： reactjs react-native react-redux redux-toolkit

【解决方案1】：

这是由你的 Redux 状态在 reducer 之外的突变引起的——可能在你的组件代码中的某个地方。

那可能看起来像

const task = useSelector(state => state.tasks.task[id])

// in an event handler
task.description = newValue // this line actually modifies your Redux store, because `task` is part of your store!
dispatch(updateTask(task))

相反你应该做

const task = useSelector(state => state.tasks.task[id])

// in an event handler
dispatch(updateTask({ id: task.id, description: newValue }))

【讨论】：