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

新手上路,请多包涵

我在我的 React 项目中使用 redux-toolkit。在 createSlice 的缩减器中,我想在减少最终状态之前使用状态中现有的实体数组并附加新数组。但我无法获得状态值。

这是减速器代码

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,
      };
    },
}});

当我调试 state.entites 变量时,它看起来像这样

在此处输入图像描述

有没有办法访问 reducer/extraReducer 中的当前状态值以根据需要重新创建状态?

因为我假设直接在 reducer 之外使用状态值是一种不好的做法。如果我错了,请指导我。

编辑

@Linda Paiste 创建的 代码沙箱 工作正常,这意味着我们可以访问 reducer 中的状态变量,但我们无法调试状态变量以更深入地挖掘状态变量目前持有的内容,因为 Redux-toolkit 是以自己的方式处理状态……从调试截图中可以明显看出

在此处输入图像描述

原文由 DevLoverUmar 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 796
2 个回答

您只能引用当前切片状态。

Therefore your only options are passing the desired entities as action’s payload or implementing this action as a thunk createAsyncThunk and use getState() from its API .

原文由 Dennis Vash 发布,翻译遵循 CC BY-SA 4.0 许可协议

总结我自己和@karlmaxlopez 评论中的信息:

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

这是因为 redux-toolkit 使用 Immer 来防止你直接改变状态。在普通的 redux reducer 中,您会收到先前的 state 作为函数参数。作为用户,您有责任不改变它,而是通过使用非改变方法(例如对象传播、数组连接等)返回具有更新值的新对象。这就是您在您的 usersCreated 减速器,完全没问题。

但是 redux-toolkit 和 Immer 为如何编写 reducer 开辟了额外的可能性。在 Immer reducer 中,函数接收的 state 参数是一个“草稿”对象。这意味着您可以直接改变草稿对象而不会引起任何问题,因为它只是草稿而不是真正的 state

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

如果你想 console.log 一个草稿值,你可以通过调用 console.log(current(value)) 使用 immer current kit.ux 中包含的工具来实现。 (根据@markerikson 的评论编辑)。

至于检查每个操作对状态所做的更改,我建议使用 Redux DevTools 。我能够看到发送了哪些操作、当前状态、进行了哪些更改等。 Redux DevTools 屏幕截图

原文由 Linda Paiste 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题