Slice 在 reducer 中的状态自引用答案

【问题标题】：Slice's State self reference inside reducerSlice 在 reducer 中的状态自引用
【发布时间】：2020-09-04 18:34:17
【问题描述】：

在使用 redux 的工具包更新 slice 的 reducer 中的状态时，我遇到了循环引用的问题，例如：

const aSlice = createSlice({
...
extraReducers: builder => {
    ...,
    builder.addCase(addToState.fulfilled, (state, action) => {
        state.data = {
            ...state.data,
            ...action.payload.data
        };
    });
    ...,
  }

});

因此导致...state.data 返回一个代理引用，而不是作为提到的陷阱之一的值，Redux Toolkit doc 以及Immer.js pitfalls section。

我可以想出一些方法来解决这个问题，但是，我想知道它们是否是解决这个问题的最佳实践或任何优雅的方法？

【问题讨论】：

标签： redux immer.js redux-toolkit

【解决方案1】：

在使用 Immer 和代理时，“全部分配”的一个有用模式是实际使用 Object.assign()。

通常，在 Redux 中使用 Object.assign() 需要传递一个空对象作为第一个参数以使其成为不可变更新，例如 Object.assign({}, oldItem, newItem)。

但是，使用 Immer，您可以进行真正的变异更新，将所有传入属性分配给现有对象。在这种情况下，Object.assign(state.data, action.payload.data)。

【讨论】：