问题标签 [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.

0 投票
2 回答
9288 浏览

reactjs - 登录到控制台而不是减速器操作中的代理对象时如何查看状态?

console.log()reducer 操作中使用时,状态打印为 Proxy 对象,而不是我真正想看到的对象。我如何看到实际的对象?我正在使用 redux-starter-kit createSlice,我不确定这是否与它有关。

这是我在切换 ToDo 时在控制台中看到的输出:

控制台输出

0 投票
4 回答
14252 浏览

reactjs - How to reset state of Redux Store when using configureStore from @reduxjs/toolkit?

I have seen solutions for clearing/resetting the store after logout but did not understand how to implement the same functionality for the following way of setting up the redux store.

Store.js:

Here is how all the reducers implemented using createAction and createReducer from @reduxjs/toolkit.

snackbar.js:

0 投票
1 回答
4578 浏览

redux - 使用 redux-toolkit 创建简单的选择器函数

当我使用redux-toolkitcreateSlice中的函数时,有没有办法自动创建简单的选择器函数?

0 投票
2 回答
1353 浏览

reactjs - 使用 redux-toolkit 键入中间件

我正在使用 TypeScript 和redux-toolkit.

tl;博士

如何dispatch在中间件上设置参数类型?


我需要从我的服务器获取一些数据并将其保存在我的商店中。所以我写了如下代码(简化):

请注意,因为获取数据是一个异步任务,所以我不能将它直接放在setPrices. 所以我创建了一个中间件fetchPrices来做请求任务并调用setPrices.

尽管它有效,但我对这个解决方案不满意,因为我设置了一个any类型。如何正确设置更好的类型?我找不到ThunkDispatchredux-toolkit.

有更好的方法吗?

0 投票
5 回答
18162 浏览

javascript - 使用 redux-toolkit 将状态重置为初始状态

我需要将当前状态重置为初始状态。但是我所有的尝试都没有成功。我如何使用 redux-toolkit 来做到这一点?

0 投票
1 回答
2011 浏览

redux - redux-toolkit 在来自另一个 thunk reducer 的同一切片中使用 actionCreater

我有一个createSlice从 redux-toolkit 生成的 redux-thunk reducer,名为getOne.

getOne从 API 获取并调度加载状态的操作,( startedLoading, finishedLoading, errorLoading)。

我还想调用在insert使用结果数据调用的同一切片中创建的另一个 actionCreater。或者直接从getOnereducer更新状态。

0 投票
0 回答
1077 浏览

javascript - forEach 中用于 redux 减速器的突变(使用 immer.js)

我找到了解决这个问题的方法,但感觉很丑。我有一个自定义道具isMultipleValid,如果那个道具是true,我需要遍历一个对象数组并在每个对象isValid:属性上设置为false

值得注意的是,我还使用(自动包含在 中),它允许我通过赋值直接改变不可变对象

我想做的事:

然而,这会导致错误:

分配给函数参数“o”的属性。

需要做什么:

现在感觉很丑陋,有一种解决方法可以简单地将值重新分配给一个临时变量,如下所示:

现在这将起作用,但感觉完全错误。有没有办法绕过这个?


PS:是的我知道我可以简单地/* eslint no-param-reassign: 0 */为这个文件做,但仍然感觉应该有一些方法来满足中间的两端

0 投票
3 回答
1118 浏览

redux - 使用 redux-toolkit 重写 redux-orm reducer

问题(tl;博士)

我们如何使用redux-toolkitcreateSlice创建一个自定义的 redux-orm reducer

有没有比这个问题中提供的尝试更简单、推荐、更优雅或只是其他解决方案?

细节

自定义 redux-orm reducer的示例如下(简化):

可以通过redux-toolkitcreateSlice的功能来简化 reducer (基于 redux-toolkit usage-guide):

但是,在 redux-orm reducer 的开始我们需要创建一个 session

然后我们使用我们的 redux-orm reducer 魔法,最后我们需要返回状态

所以我们错过了添加此功能的类似方法beforeEachReducerafterEachReducer方法。createSlice

解决方案(尝试)

我们创建了一个withSession创建会话并返回新状态的高阶函数。

我们需要将每个 reducer 逻辑包装在 this 中withSession

0 投票
1 回答
1870 浏览

reactjs - React 工具包和 redux-first-router

我正在研究 React with Redux 以重写我们的产品。使用 Redux-Toolkit https://redux-toolkit.js.org/清除了 Redux 周围的许多迷雾。然后发现 React-Router 让状态管理变得乱七八糟,在 redux-first-router https://github.com/faceyspacey/redux-first-router中找到了解决方案。

现在我想结合这些优秀的库。但我认为我在配置中做错了什么。这是代码。从https://codesandbox.io/s/m76zjj924j的沙盒示例开始,我将 configureStore.js 文件更改为(为简单起见,我省略了用户减速器的代码)

但是现在每次更新 route = Redux store 时,我都会在浏览器中得到一个异常:

PROFILE: { path: "/profile/:username", thunk: fetchUserData }如果路由具有定义为这样的“thunk”属性,我可以看到这源于路由定义:

如果我将 thunk 属性更改为可序列化的值(或删除它),错误就消失了。现在不知何故,thunk 被添加到操作的有效负载中以更新路径。什么...?

该怎么办?好的,我可以让它与传统的 Redux 设置一起使用,但由于我是 redux 工具包的忠实粉丝,它对我来说会很不错,也许还有更多人可以让它与工具箱一起使用。

0 投票
1 回答
106 浏览

redux - 为什么这种状态会被 immer 产品改变?

使用 Immer 的产品来操纵状态时,我收到了状态突变错误。

当我在同一个减速器中手动创建测试接口并调用生产时,它似乎按预期工作:

为什么“状态”被操纵,而“testState”在以相同方式调用生产时保持不变?

正确更新状态的沙箱: https ://codesandbox.io/embed/festive-ritchie-5nf31?fontsize=14&hidenavigation=1&theme=dark