Slice 在 reducer 中的 State 自引用

Question

当使用 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 as well as in Immer.js pitfalls section。

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

Answer 1

使用 Immer 和代理时，"assign all" 的一个有用模式是实际使用 Object.assign()。

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

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

Slice 在 reducer 中的 State 自引用

Slice's State self reference inside reducer

redux

immer.js

redux-toolkit