如何在createSlice的reducer中获取状态值？

Question

我正在react项目中使用redux工具包。在createSlice的reducer中，我希望在缩减最终状态之前，使用状态中现有的实体数组并附加新数组。但我无法获取状态值。

这是减速器代码

export const usersSlice = createSlice({
  name: "users",
  initialState: initialUsersState,
  reducers: {
    usersCreated: (state: UsersState, action) => {
      // in real, return count from the server and append the entities on front-end only?
      const { count, entities } = action.payload;
      const existingEntities = state.entities;
      const newEntities = [...existingEntities, ...entities];
      const totalCount = state.totalCount+count;
      return {
        ...state,
        entities: newEntities,
        totalCount: totalCount,
        listLoading: false,
        error: null,
      };
    },
}});

当我调试状态时。entites变量，如下所示

是否有方法访问reducer/extraReducer中的当前状态值，以便根据需要重新创建状态？

因为我假设直接在减速器之外使用状态值是一种不好的做法。如果我错了，请引导我。

编辑

由@琳达Paiste创建的代码沙盒工作正常，这意味着我们可以在减速器中访问状态变量，但是我们不能调试状态变量来更深入地挖掘状态变量目前持有的内容，因为Redux工具包正在处理状态这是自己的方式...从调试截图中可以明显看出

Answer 1

我只是简单地复制/粘贴@琳达Paiste的CodeSandbox解决方案的等价物，所以查找和重用速度更快。

const usersSlice = createSlice({
  name: "users",
  initialState: {
   users: [],
  },
  reducers: {
    userCreated: (state, action) => {
      const newUser = action.payload;
      const existingUsers = JSON.parse(JSON.stringify(state.users));
      const newUsers = [...existingUsers, newUser];
      state.users= newUsers;
    }
  }
});

Answer 2

只能引用当前切片状态。

因此，您唯一的选择是将所需的实体作为操作的有效负载传递，或者将此操作实现为thunkcreateAsyncThunk，并从其API中使用getState（）。

Answer 3

总结我和@karlmaxlopez评论中的信息：

我将您的代码复制到CodeSandbox演示中，发现代码确实按预期执行。您可以附加到state.entities数组，就像它是一个普通数组一样，即使state.entities的值在检查或null时显示为Proxy日志记录时。

这是因为redux toolkit使用Immer来防止您直接改变状态。在普通redux reducer中，您将收到上一个状态作为函数参数。作为用户，您有责任不对其进行变异，而是使用非变异方法（如对象扩展、数组concat等）返回具有更新值的新对象。这是您在usersCreatedreducer中所做的，这是完全正确的。

但是redux工具包和Immer为如何编写减速机提供了一种新的可能性。在Immer reducer中，函数接收到的state参数是一个“draft”对象。这意味着您可以直接修改draft对象而不会引起任何问题，因为它只是一个草稿，而不是真正的状态。

这也意味着当你试图检查这个以前的状态时，它会表现得很奇怪，因为它只是一个草稿，而不是你所期望的实际对象。

如果您想console.log草稿值，您可以通过使用redux工具包中包含的immer当前函数调用console.log（当前（值））来实现.（根据@Markerikson的评论编辑）。