问题标签 [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.
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:
redux - 使用 redux-toolkit 创建简单的选择器函数
当我使用redux-toolkitcreateSlice
中的函数时,有没有办法自动创建简单的选择器函数?
reactjs - 使用 redux-toolkit 键入中间件
我正在使用 TypeScript 和redux-toolkit
.
tl;博士
如何dispatch
在中间件上设置参数类型?
我需要从我的服务器获取一些数据并将其保存在我的商店中。所以我写了如下代码(简化):
请注意,因为获取数据是一个异步任务,所以我不能将它直接放在setPrices
. 所以我创建了一个中间件fetchPrices
来做请求任务并调用setPrices
.
尽管它有效,但我对这个解决方案不满意,因为我设置了一个any
类型。如何正确设置更好的类型?我找不到ThunkDispatch
从redux-toolkit
.
有更好的方法吗?
javascript - 使用 redux-toolkit 将状态重置为初始状态
我需要将当前状态重置为初始状态。但是我所有的尝试都没有成功。我如何使用 redux-toolkit 来做到这一点?
redux - redux-toolkit 在来自另一个 thunk reducer 的同一切片中使用 actionCreater
我有一个createSlice
从 redux-toolkit 生成的 redux-thunk reducer,名为getOne
.
getOne
从 API 获取并调度加载状态的操作,( startedLoading
, finishedLoading
, errorLoading
)。
我还想调用在insert
使用结果数据调用的同一切片中创建的另一个 actionCreater。或者直接从getOne
reducer更新状态。
javascript - forEach 中用于 redux 减速器的突变(使用 immer.js)
我找到了解决这个问题的方法,但感觉很丑。我有一个自定义道具isMultipleValid
,如果那个道具是true
,我需要遍历一个对象数组并在每个对象isValid:
属性上设置为false
值得注意的是,我还使用了 immerjs(自动包含在 reduxjs-toolkit中),它允许我通过赋值直接改变不可变对象
我想做的事:
然而,这会导致eslint错误:
分配给函数参数“o”的属性。
需要做什么:
现在感觉很丑陋,有一种解决方法可以简单地将值重新分配给一个临时变量,如下所示:
现在这将起作用,但感觉完全错误。有没有办法绕过这个?
PS:是的我知道我可以简单地/* eslint no-param-reassign: 0 */
为这个文件做,但仍然感觉应该有一些方法来满足中间的两端
redux - 使用 redux-toolkit 重写 redux-orm reducer
问题(tl;博士)
我们如何使用redux-toolkit的createSlice创建一个自定义的 redux-orm reducer?
有没有比这个问题中提供的尝试更简单、推荐、更优雅或只是其他解决方案?
细节
自定义 redux-orm reducer的示例如下(简化):
可以通过redux-toolkitcreateSlice
的功能来简化 reducer (基于 redux-toolkit usage-guide):
但是,在 redux-orm reducer 的开始我们需要创建一个 session
然后我们使用我们的 redux-orm reducer 魔法,最后我们需要返回状态
所以我们错过了添加此功能的类似方法beforeEachReducer
和afterEachReducer
方法。createSlice
解决方案(尝试)
我们创建了一个withSession
创建会话并返回新状态的高阶函数。
我们需要将每个 reducer 逻辑包装在 this 中withSession
。
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 工具包的忠实粉丝,它对我来说会很不错,也许还有更多人可以让它与工具箱一起使用。
redux - 为什么这种状态会被 immer 产品改变?
使用 Immer 的产品来操纵状态时,我收到了状态突变错误。
当我在同一个减速器中手动创建测试接口并调用生产时,它似乎按预期工作:
为什么“状态”被操纵,而“testState”在以相同方式调用生产时保持不变?
正确更新状态的沙箱: https ://codesandbox.io/embed/festive-ritchie-5nf31?fontsize=14&hidenavigation=1&theme=dark