问题标签 [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 回答
90 浏览

redux - 此外,动作创建者会覆盖 toString() 以便动作类型成为其字符串表示形式

我正在从官方文档中学习 redux-toolkit 并遇到了这一行 -Also, the action creator overrides toString() so that the action type becomes its string representation.这是什么意思?

这是文档中的代码:

所以,例如,当我写类似的东西时

它正在记录INCREMENT。那么这是 toString() 的覆盖吗?我真的很困惑。

我是 redux-toolkit 的新手,任何帮助将不胜感激。谢谢。

0 投票
0 回答
2758 浏览

reactjs - 组合 redux 工具包 slice 和 reducer 的惯用方式

Techstack:React、redux、redux 工具包(通过扩展 Immer)。

用例- 我正在尝试组合切片。切片用于独立的状态片段,其接口由第三方库定义。

我正在尝试做一些非常规的事情。我已经很久没有在 React 或 redux 上做任何认真的工作了,所以我可能错过了一些有用的库。我已经完成了初步扫描,但没有找到任何适合我口味的东西。然而,建议总是受欢迎的。

另外,这是我第一次认真尝试使用打字稿。因此,尽管我已经完成了作业,但我的大脑还没有被所有打字稿习语和好东西连接起来。

我不想放弃我仅​​用于此用例的任何技术。

这个用例将不断重复。我相信社区中的其他人也面临过类似的问题。

由于 typescript 或多或少是 ES6 之上的语法糖,因此存在许多明显的限制,使得此类用例难以处理。

我在这里做一些与风险类型相关的事情。但是代码将被深埋。由于这不是合同 API 的一部分,所以我可能会做一些疯狂的事情。

但是,如果我能找到一种惯用的方法,我可以将这个逻辑推广到上游,甚至可以开源它。

有什么建议么?

编辑:添加进一步说明

Slice 有 2 个输出,CaseReducers 和一个 reducer,我认为这是一个 reducer,它结合了提供给 slice 的所有 reducer。我还没有完成在我的代码中为上面的代码运行单元测试。在隐藏上面的代码是否真的可以工作的其他错误中有点迷失。我以为是在某一时刻。

请注意,上面的代码是实际代码的代表。

这是一个示例架构

如您所见,key1和的架构key2是相同的。所以我希望有相同的切片代码来处理key1key2参数化以处理状态的正确部分。

同样,这个例子是有代表性的。我正在处理的状态对象很大并且有深度。

此外,状态对象在第三方库中被描述为“打字稿”接口。我认为我应该继续处理相同的问题,而不是编写自己的 JSON 模式。因此,我在keyof这里使用运算符。

但是如果我能正确解决这个参数化问题,我可以显着地重用代码。

0 投票
2 回答
13976 浏览

redux - Redux 工具包中的多个切片中的操作

Redux 工具包文档提到在多个 reducer 中使用操作(或者更确切地说是操作类型)

首先,Redux 操作类型并不意味着对单个切片是专有的。从概念上讲,每个 slice reducer “拥有”它自己的 Redux 状态,但它应该能够监听任何动作类型并适当地更新其状态。例如,许多不同的切片可能希望通过清除数据或重置回初始状态值来响应“用户注销”操作。在设计状态形状和创建切片时请记住这一点。

但是,“记住这一点” ,鉴于工具包将切片名称放在每个动作类型的开头,实现这一点的最佳方法是什么?并且您从该切片中导出一个函数并调用该单个函数来调度操作?我错过了什么?这是否必须以某种不使用的方式完成createSlice

0 投票
0 回答
412 浏览

redux - 无法分配给对象“#”的只读属性“状态”'

I'm using Redux Toolkit and I'm having trouble in one of my actions. Here's relevant parts of my slice:

export const initialCookingSessionState = {
  recip

I'm using Redux Toolkit and I'm having trouble in one of my actions. Here's relevant parts of my slice:

When I dispatch startTimer, I get the error:

Cannot assign to read only property 'state' of object '#'

There must be something about what is and isn't possible with Redux Toolkit's "Mutative State Changes" that I'm missing. It seems to me that my example isn't that different from theirs in the docs, but apparently I'm wrong about that. (the other actions work fine)

In case it's helpful, here are the models, which I think are pretty simple:


You didn't initialize the list ListOfSheets in the SheetListModel. Initialize the list in the constructor:

Or you can achieve the same with the shorter syntax:

0 投票
0 回答
1197 浏览

redux - Redux-toolkit 动作单元测试

我正在尝试测试商店更改。所以,当我派发rateRecipe{id: 1, rating: 2},我收到以下错误:

切片.js:

slice.test.js:

0 投票
0 回答
117 浏览

reactjs - Redux Toolkit 中使用 ownProps 的 redux action 类型

我的切片中有这个动作:

我已经编写了我的mapDispatch操作,以便我可以在我的组件中非常简单地调用它:

这工作正常,但类型Props困扰我。它实际上应该是什么?

  1. 目前是可选的。如果我将其?设为非可选,我会从调用组件中收到一个 TS 错误:

但是该函数不connect向包装的组件提供该道具吗?

  1. startTimer: any实际上应该是什么???我尝试了许多排列,它们要么从onClick类型中得到错误,要么更重要的是从connect调用的最终参数中得到错误。例如startTimer: PayloadAction<{timer: StepTimer, timerState: CookingTimerState}>得到这两个错误。(然后尝试onClick={ () => startTimer() }说这startTimer是不可调用的。

什么是正确的类型startTimer

0 投票
2 回答
6777 浏览

reactjs - redux-toolkit 在 reducer 之间共享状态

我构建了小型预算计算器,这是我第一次使用 redux-toolkit,问题是如何在 redux-toolkit 中的 reducer 之间共享/传递状态?(如何使用余额切片中的totalIncomes和totalExpenses来计算总余额?

另一个问题是可以使用 redux-toolkit 而不是普通的 redux

收入.js:

费用.js:

平衡.js:

0 投票
1 回答
735 浏览

reactjs - 在调度中检测到状态突变:即使使用工具包

此操作引发以下错误:

错误:不变量失败:在调度内检测到状态突变,路径为:cookingSession.stepTimers.0.state。看一下处理动作 {"type":"session/setTimerState","payload":{"timer":{"label":"Dance","durationSec":600,"stepIndex" 的 reducer :0,"timerId":0,"state":2},"timerState":2}}

我认为 Redux 工具包允许您进行这种状态更改。是因为我StepTimer的 s 是类对象而不是 POJO 吗?

0 投票
2 回答
364 浏览

redux - Redux Toolkit:如何使用 uid 测试操作准备回调

在测试递增 todo id的文档中,这假定了可预测的响应。

在下面的示例中,生成了一个唯一的 id。

这怎么可能被测试?

这个测试通过了,但我不确定它是否正确,不应该根据准备回调中的内容来定义 id 吗?

切片.js

slice.test.js

0 投票
1 回答
554 浏览

immer.js - immer 的原始函数为代理对象返回 undefined

console.log(state, original(state))

印刷:

Proxy {0: {…}} undefined

我被困住了......如果我有更多时间,我会进入源代码以找出如何重写original以不失败,但我被迫修复一个错误。

如果对象是代理对象,为什么原始返回未定义?

重要说明,这是在 redux 工具包切片函数中。