问题标签 [redux-toolkit]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - 如何在 createSlice reducer prepare 函数中创建实体 ID
我在redux-toolkit的函数中prepare
包含的reducer中包含的回调函数遇到了一些问题。addEntity
createSlice
我正在尝试使用prepare
回调将唯一 ID 添加到我的操作有效负载中。
redux -toolkitcreateSlice
文档说:
如果需要通过 prepare 回调自定义创建 action creator 的有效负载值,reducers 参数对象的相应字段的值应该是对象而不是函数。该对象必须包含两个属性:reducer 和 prepare。reducer 字段的值应该是 case reducer 函数,而 prepare 字段的值应该是 prepare 回调函数。
这是我正在使用的代码(使用 TypeScript 编写):
但是,当我编译我的应用程序并测试使用该操作创建实体addEntity
时,prepare
回调似乎没有做任何事情。
这是我使用 Redux DevTools 调度的操作:
结果状态:
为什么我的准备回调"test"
在将有效负载传递给减速器之前不会覆盖 id?任何帮助或指导将不胜感激。
reactjs - 如何使用 redux-toolkit 访问 redux 中另一个切片的状态?
在我的 Redux 商店中,我有多个切片,我想访问lang
speciesSlice 中的 settingsSlice 的状态。
这是我的切片的代码示例:
到目前为止,我还没有找到解决方案,所以也许这是不可能的?
我可以只使用其中包含所有状态的切片,但我真的很想将状态的不同部分分隔在不同的切片中。
javascript - 使用 redux-toolkit 时商店没有有效的 reducer
我在使用 redux-toolkit configureStore 函数时遇到了一些问题,每当我尝试在页面上调用 dispatch 时,都会出现“Store 没有有效的 reducer”错误。我想我的导入是正确的,并且商店也在我的 index.js 文件的上层。
这是它的外观:
store.js 文件:
book.js 文件:
index.js 文件:
提前致谢!
react-native - 使用 Redux Toolkit 从存储中删除中间件
我有一个 ReactNative 应用程序,我正在尝试从我的中间件列表中删除中间件“serializableStateInvariant”。https://redux-toolkit.js.org/api/getDefaultMiddleware页面缺少一些信息。
他们指示使用以下内容配置商店:
但没有说明如何导入thunk
, 或immutableStateInvariant
.
如何导入它们,以便我可以将中间件设置为[thunk, immutableStateInvariant]
, 没有serializableStateInvariant
?
reactjs - 如何为 createSlice() 的 extraReducers 编写测试(Jest + Enzyme)?
我已经开始使用@reduxjs/toolkit 创建我的应用程序并且有点卡住了。我找不到任何资源可以指导我如何对 extraReducers 中的逻辑进行单元测试。任何帮助都是不言而喻的。
例子:
例子:
//测试 .. 为 setId()
如何在 extraReducers 中测试 fetchList.fulfilled 和 fetchList.rejected 的逻辑!
reactjs - React,Redux-Toolkit:无法读取未定义的属性“数据”
设置redux store有问题!它无法读取 state.dataValue.data,表示 DataSlice 未定义。同样在 Redux Devtool 中没有设置存储文件:store.js
文件2:切片/dataSlice.js
文件 3
文件 4 库存.jsx
它显示 dataValue 未定义,我正在使用 React-Toolkit
redux - 如何在切片中使用存储?
我想在我的 action/reducer 切片文件中使用 store 并且我想调用一系列 thunk 来调度 API 响应来存储,以调度下一个 thunk 我需要来自 store 的一些数据我该怎么做?
redux-toolkit - 我如何定义一个动作而不需要为它实现一个 reducer?
我正在将一些现有的 redux 代码转换为工具包方式。我们有很多触发 thunk 的动作(从后端加载数据)但没有减速器。我们的模式是加载/成功/失败三元组。基本上只有成功和失败需要reducer语句。我如何使用工具包做到这一点?我是否必须放入一个只为加载操作返回未更改状态的减速器?
redux-toolkit - 如何从我的组件中获取操作的“{slice}/{action}”值?
我的组件中有一些逻辑需要知道我的一些操作的字符串值。这是 redux 工具包中显示的值,看起来像 {slice name}/{action}。有没有一种方法可以做到这一点?非常感谢
reactjs - Redux Toolkit 和 Reactjs:切片中的更改触发在其他切片上订阅的组件上重新渲染
我有一个用 CRA 引导的 react 应用程序,我使用 @reduxjs/toolkit 库通过 reduxjs 实现了状态管理。该状态当前由 4 个不同的切片组成。
我现在的问题是,如果我更改切片的单个属性,订阅其他切片的组件,通过 useSelector 钩子,会重新渲染,导致各种我没想到的奇怪行为。
通常,我从组件中订阅切片的方式如下:
其中 RootState 类型表示组成存储的所有切片,结合 combineReduce 函数,如下所示:
我的印象是,在选择切片形式时使用解构可以避免组件在其他切片发生变化时重新渲染。
所以我的问题是:这是正确的行为还是我以错误的方式做事?
编辑对于效果管理,我通过以下方式添加了 redux-observable 中间件,因为我不太喜欢 thunk:
然后在配置商店时:
中间件会不会把事情搞砸?也许以这种方式指定中间件会删除 @reduxjs/toolkit 提供的 immer 的默认实现?
编辑 2:根据 Mary 的评论,这是基本上导致所有其他切片返回新对象的减速器。在这种情况下,具体操作是 setShowQRCode。但是对于任何其他操作,行为都是相同的。我正在直接更新状态,因为 immer 在窗帘后面施展魔法