问题标签 [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 投票
1 回答
5789 浏览

reactjs - 如何在 createSlice reducer 中使用 dispatch?

例如,我有这个切片,我想在 setUser 中使用调度。我怎样才能做到这一点?

0 投票
1 回答
191 浏览

typescript - 如何从 Slice(redux 工具包)中获取映射到字符串的操作的类型安全 POJO

我正在尝试设置一个函数,该函数返回映射到相应操作类型名称的切片操作名称的类型安全 POJO(使用 sliceName/sliceAction 的约定)。该功能非常简单,但让 TypeScript 识别键让我很尴尬。

我正在关注Redux Toolkit 教程中的示例,但我想看看这是否可行。理想情况下,我将能够将该函数与 Redux-Saga 或 Redux-Observable 结合使用,以避免使用字符串文字作为操作类型。

我已经尝试设置了一个代码框

目的是能够像这样进行切片:

并获得一个 TypeScript 来识别输出:

感谢您花时间阅读本文,我特别感谢任何花时间尝试解决它的人。我知道你的时间很宝贵:)

0 投票
1 回答
738 浏览

redux - Slice 在 reducer 中的状态自引用

在使用 redux 的工具包更新 slice 的 reducer 中的状态时,我遇到了循环引用的问题,例如:

因此导致...state.data返回一个代理引用而不是返回的值,这是提到的陷阱之一,Redux Toolkit 文档以及Immer.js 的陷阱部分

我可以想出一些方法来解决这个问题,但是,我想知道它们是否是解决这个问题的最佳实践或任何优雅的方式来完成这项工作?

0 投票
2 回答
1904 浏览

react-native - extraReducer 中的 redux-toolkit 状态更改不会启动重新渲染

我正在尝试同时注销和清除商店,所以点击我发送这个:

Redux persist 捕获它,并报告清除存储。伟大的。在另一个减速器中,我捕获了该调度,并像这样删除了我的访问令牌:

PURGE 减速器实际上被调用,并修改了状态,但仍然没有重新渲染发生。所以 redux 不能接受它。但是根据文档,Redux 工具包使用 Proxy 对象作为状态并进行比较以查看它是否被修改。

我尝试过的事情:

没用。存储工作并保存数据,其他操作工作。我该如何进行?

编辑:进一步调试显示我自己的 reducer 在 redux-persist reducer 之前被调用,redux-logger 报告我的 reducer 根本没有改变状态。

0 投票
2 回答
6031 浏览

reactjs - 如何使用 Redux Tool Kit 的“createSlice”对 Redux 进行单元测试?

我正在研究如何使用 Jest 对我们项目的 Redux 代码进行单元测试。我一直在阅读“官方”Redux 建议,但我们的代码与他们引用的 Redux 设置不同,因为我们使用了Redux Tool Kit (RTK) 和“ createSlice ”,它可以自动执行一些过程,例如操作创作者创作。我们如何对 RTK 创建的 Redux 进行单元测试createSlice?例如,因为动作创建者是自动创建的,所以测试它们是否有意义?一般来说,由于大部分 RTK 设置是自动的,我们需要测试什么?Redux Tool Kit 是否有任何工具可以使这更容易?(我没有看到任何)。

此外,我们还有“手动”设置的 Redux Thunks。我们看到了Redux 文档的建议,但是参考上面的内容,我们是否应该以不同的方式处理这个测试,因为我们使用 RTK 设置了主 Redux 和createSlice

最后,Redux 所依赖的 API 调用通过 Apollo Client 运行。我看到了 Apollo 关于如何使用 React 客户端测试 React 的建议。为了测试 Redux,我们应该使用类似https://www.npmjs.com/package/mock-apollo-client的东西来模拟 Apollo 客户端吗?

0 投票
2 回答
2002 浏览

reactjs - NextJs / Framer Motion:使用 useViewportScroll 时出现此警告:警告:useLayoutEffect 在服务器上不执行任何操作,

我正在使用带有 Framer Motion 的 NextJs。一切正常,但我收到了这个警告:

0 投票
1 回答
1129 浏览

javascript - 无法使用 Next.js 在 Redux 中添加跟踪功能

我想将跟踪功能添加到我在 Redux 中的开发工具中:

但是我这样做时:

我收到以下错误...

提前致谢!

更新

跟随redux-toolkit的一个线程,我想我已经完成了一半,但现在我得到以下内容,考虑到我的设置,这似乎很奇怪:

这是我更新的商店:

0 投票
0 回答
299 浏览

reactjs - 从切片调用操作会从我的商店中删除切片

我有一个应用程序,我正在使用切片将“普通”redux 转换为 redux 工具包。我已经转换了我的一个减速器,它工作正常。我已经写了第二个片段,在我将旧动作切换到新动作之前,应用程序会运行(但当然,当我调用我的动作时,它们不会做任何事情)。

以下是切片文件的当前状态:

这是我测试交换动作创建者的第一个地方:

当我用对我的新切片操作之一的调用替换对旧操作创建者的调用时,应用程序崩溃,因为切片不再在商店中!!!我打开 redux devtools,状态缺少我的对象。

使用旧的动作创建者:

在此处输入图像描述

交换动作创建者后(上面粘贴的代码)

在此处输入图像描述

这里发生了什么?!

这是我的应用程序中的另一个工作切片:

这是商店设置

0 投票
1 回答
827 浏览

typescript - 使用函数初始化商店时如何在redux工具包中获取AppDispatch Typescript类型?

今天我的AppDispatch类型提取自store.dispatch

现在我尝试用 initStore 函数替换 store。我想使用 preloadedState 为我的商店补充水分。

我有一个错误:

如何正确获取 AppDispatch 类型?

0 投票
2 回答
966 浏览

reactjs - 添加 react-redux Provider 时钩子调用无效

我正在构建一个小应用程序来学习如何使用 Redux 工具包(我对 React/Redux 的了解主要来自过时的 Udacity 课程)。

错误消息给出了弹出此错误的前 3 个原因,但似乎其中任何一个都不适用于我。

  1. React 和 React DOM 的版本不匹配?我的两个都被列为依赖项并且具有相同的版本。
  2. 打破 Hooks 的规则?不使用我知道的任何钩子。我所有的组件都是类组件(Udacity,还记得吗?)。此外,我已经从 App 组件的render()调用中删除了所有组件,并且错误仍然存​​在。
  3. 不止一份 React?npm ls react只显示一个版本。

我不太确定从这里去哪里。每当我从ReactDOM.render()调用中删除 Provider 时,错误就会消失。

我已经盯着这个有一段时间了,我什么也没有。发布我认为是下面的相关代码。

我目前有一个减速器:

/src/features/mortgage/mortgageSlice.ts

根减速器:

/src/app/rootReducer.ts

店铺:

/src/app/store.ts

/src/index.tsx