- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我在我的 react 项目中使用 redux-toolkit。在 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,
};
},
}});
当我调试 state.entites 变量时,它看起来像这样
最佳答案
总结我自己和@karlmaxlopez 评论中的信息:
我将您的代码复制到 CodeSandbox demo 中,发现代码 确实按预期执行了 。即使在检查时 state.entities
的值显示为 state.entities
或记录时显示为 Proxy
,您也可以将其附加到 null
数组,就像它是一个普通数组一样。
这是因为 redux-toolkit 使用 Immer 来防止你直接改变状态。在普通的 redux reducer 中,您会收到之前的 state
作为函数参数。作为用户,您有责任不对其进行变异,而是通过使用非变异方法(例如对象扩展、数组连接等)返回具有更新值的新对象。这就是您在 usersCreated
reducer 中所做的,这完全没问题。
但是 redux-toolkit 和 Immer 为如何编写 reducer 开辟了额外的可能性。在 Immer reducer 中,函数接收的 state
参数是“草稿”对象。这意味着您可以直接改变草稿对象而不会引起任何问题,因为它只是草稿而不是真正的 state
。
这也意味着当你试图检查这个先前的状态时,它的行为会很奇怪,因为它只是一个草稿,而不是你所期望的实际对象。
如果你想要 console.log
一个草稿值,你可以通过使用 immer console.log(current(value))
函数调用 current
来实现,该函数包含在 redux 工具包中。 (根据@markerikson 的评论编辑)。
至于检查每个操作对您的状态所做的更改,我建议使用 Redux DevTools 。我能够看到发送了哪些操作、当前状态、进行了哪些更改等。
关于javascript - 如何在 createSlice 的 reducer 中获取状态值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63885139/
我有一个从我的 API 返回的深度嵌套的数据对象,它看起来像下面的 JSON。 我正在使用 Redux 工具包的 createSlice 创建一段 trip所以目前在我的 createSlice 中,
我正在执行一项操作,应该对某些状态属性进行部分重置。 在转向 redux-toolkit 之前,我已经使用以下代码实现了这一点: 初始状态 const initialState = { use
这是一个例子: const user = createSlice({ name: 'user', initialState: { name: '', age: 20 }, reducers
例如,我有这个切片,我想在 setUser 中使用 dispatch。我怎样才能做到这一点? const contactsSlice = createSlice({ name: 'contacts
我有以下代码: import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'; import { client } from '..
我正在重构我的 reducer 以使用 redux-toolkit 的 createSlice . 现在我有一个非常基于事件的 reducer ,有时需要针对不同的操作进行类似的状态更新 . 同原sw
我在我的 react 项目中使用 redux-toolkit。在 createSlice 的化简器中,我想使用状态中现有的实体数组并附加新数组,然后再减少最终状态。但我无法获得状态值。 这是 redu
当我使用 redux-tookkit 中的 createSlice 时,我很难理解我在哪里进行异步调用。我尝试按照文档进行操作,但迷失了所有 TypeScript 的内容。 (我没有使用 TS)我有一
当我使用 redux-tookkit 中的 createSlice 时,我很难理解我在哪里进行异步调用。我尝试按照文档进行操作,但迷失了所有 TypeScript 的内容。 (我没有使用 TS)我有一
我正在尝试在切片缩减器内部的状态数组中追加/更新一些数据,但是当我尝试 console.log .projects我感兴趣的状态数组我只得到了一个 javascript 代理。这里发生了什么(我做错了
我正在尝试迁移到 redux 工具包,但刚刚遇到了一个问题。 这是一个简单的计数器切片示例。 import { createSlice } from "@reduxjs/toolkit"; const
通常,使用可变对象,例如 Map是 strongly discouraged . 然而,immer的魔力允许对不可变对象(immutable对象)进行操作,就好像它们是可变的一样。 具体来说,imme
是否有一种众所周知的模式可以将动态初始状态的负载注入(inject) Redux-Toolkit 的 initialState 对象? 也就是说,我想这样做 - import initialState
我是 React 的新手,我正在学习使用 React 来构建 Web 应用程序。我发现 Redux Toolkit 很有用并使用它的 createSlice()函数来实现基本功能。但是,我遇到了与“最
我使用 redux-starter-kit 中的 createSlice()。由于底层的 immer,reducer 中的状态可以发生变化。但他们表示 immer 有一些限制。例如,您不应该同时从 r
我使用 redux-starter-kit 中的 createSlice()。由于底层的 immer,reducer 中的状态可以发生变化。但他们表示 immer 有一些限制。例如,您不应该同时从 r
我正在使用 createSlice连同 useReducer . 我希望正确输入调度,即 React.Dispatch . 如何从 createSlice 中提取操作类型? 以下不起作用,它解析为 A
我正在研究如何使用 Jest 对我们项目的 Redux 代码进行单元测试。我一直在阅读 'official' Redux recommendations ,但我们的代码不同于他们引用的 Redux 设
我遇到了 Redux Toolkit (RTK),并希望实现它提供的更多功能。我的应用程序分派(dispatch)到通过 createSlice({}) 创建的 reducer 切片(请参阅 crea
在Statee.Entities[key]行,.isVisible类型的脚本在下方抛出错误对象可能未定义。ts(2532)(属性)实体:WritableDraft>。我该如何解决这个问题?。打字稿不应
我是一名优秀的程序员,十分优秀!