问题标签 [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.
redux - 此外,动作创建者会覆盖 toString() 以便动作类型成为其字符串表示形式
我正在从官方文档中学习 redux-toolkit 并遇到了这一行 -Also, the action creator overrides toString() so that the action type becomes its string representation.
这是什么意思?
这是文档中的代码:
所以,例如,当我写类似的东西时
它正在记录INCREMENT
。那么这是 toString() 的覆盖吗?我真的很困惑。
我是 redux-toolkit 的新手,任何帮助将不胜感激。谢谢。
reactjs - 组合 redux 工具包 slice 和 reducer 的惯用方式
Techstack:React、redux、redux 工具包(通过扩展 Immer)。
用例- 我正在尝试组合切片。切片用于独立的状态片段,其接口由第三方库定义。
我正在尝试做一些非常规的事情。我已经很久没有在 React 或 redux 上做任何认真的工作了,所以我可能错过了一些有用的库。我已经完成了初步扫描,但没有找到任何适合我口味的东西。然而,建议总是受欢迎的。
另外,这是我第一次认真尝试使用打字稿。因此,尽管我已经完成了作业,但我的大脑还没有被所有打字稿习语和好东西连接起来。
我不想放弃我仅用于此用例的任何技术。
这个用例将不断重复。我相信社区中的其他人也面临过类似的问题。
由于 typescript 或多或少是 ES6 之上的语法糖,因此存在许多明显的限制,使得此类用例难以处理。
我在这里做一些与风险类型相关的事情。但是代码将被深埋。由于这不是合同 API 的一部分,所以我可能会做一些疯狂的事情。
但是,如果我能找到一种惯用的方法,我可以将这个逻辑推广到上游,甚至可以开源它。
有什么建议么?
编辑:添加进一步说明
Slice 有 2 个输出,CaseReducers 和一个 reducer,我认为这是一个 reducer,它结合了提供给 slice 的所有 reducer。我还没有完成在我的代码中为上面的代码运行单元测试。在隐藏上面的代码是否真的可以工作的其他错误中有点迷失。我以为是在某一时刻。
请注意,上面的代码是实际代码的代表。
这是一个示例架构
如您所见,key1
和的架构key2
是相同的。所以我希望有相同的切片代码来处理key1
和key2
参数化以处理状态的正确部分。
同样,这个例子是有代表性的。我正在处理的状态对象很大并且有深度。
此外,状态对象在第三方库中被描述为“打字稿”接口。我认为我应该继续处理相同的问题,而不是编写自己的 JSON 模式。因此,我在keyof
这里使用运算符。
但是如果我能正确解决这个参数化问题,我可以显着地重用代码。
redux - Redux 工具包中的多个切片中的操作
Redux 工具包文档提到在多个 reducer 中使用操作(或者更确切地说是操作类型)
首先,Redux 操作类型并不意味着对单个切片是专有的。从概念上讲,每个 slice reducer “拥有”它自己的 Redux 状态,但它应该能够监听任何动作类型并适当地更新其状态。例如,许多不同的切片可能希望通过清除数据或重置回初始状态值来响应“用户注销”操作。在设计状态形状和创建切片时请记住这一点。
但是,“记住这一点” ,鉴于工具包将切片名称放在每个动作类型的开头,实现这一点的最佳方法是什么?并且您从该切片中导出一个函数并调用该单个函数来调度操作?我错过了什么?这是否必须以某种不使用的方式完成createSlice
?
redux - Redux-toolkit 动作单元测试
我正在尝试测试商店更改。所以,当我派发rateRecipe
时{id: 1, rating: 2}
,我收到以下错误:
切片.js:
slice.test.js:
reactjs - Redux Toolkit 中使用 ownProps 的 redux action 类型
我的切片中有这个动作:
我已经编写了我的mapDispatch
操作,以便我可以在我的组件中非常简单地调用它:
这工作正常,但类型Props
困扰我。它实际上应该是什么?
- 目前是可选的。如果我将其
?
设为非可选,我会从调用组件中收到一个 TS 错误:
但是该函数不connect
向包装的组件提供该道具吗?
startTimer: any
实际上应该是什么???我尝试了许多排列,它们要么从onClick
类型中得到错误,要么更重要的是从connect
调用的最终参数中得到错误。例如startTimer: PayloadAction<{timer: StepTimer, timerState: CookingTimerState}>
得到这两个错误。(然后尝试onClick={ () => startTimer() }
说这startTimer
是不可调用的。
什么是正确的类型startTimer
?
reactjs - redux-toolkit 在 reducer 之间共享状态
我构建了小型预算计算器,这是我第一次使用 redux-toolkit,问题是如何在 redux-toolkit 中的 reducer 之间共享/传递状态?(如何使用余额切片中的totalIncomes和totalExpenses来计算总余额?
另一个问题是可以使用 redux-toolkit 而不是普通的 redux
收入.js:
费用.js:
平衡.js:
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 吗?
redux - Redux Toolkit:如何使用 uid 测试操作准备回调
在测试递增 todo id的文档中,这假定了可预测的响应。
在下面的示例中,生成了一个唯一的 id。
这怎么可能被测试?
这个测试通过了,但我不确定它是否正确,不应该根据准备回调中的内容来定义 id 吗?
切片.js
slice.test.js
immer.js - immer 的原始函数为代理对象返回 undefined
console.log(state, original(state))
印刷:
Proxy {0: {…}} undefined
我被困住了......如果我有更多时间,我会进入源代码以找出如何重写original
以不失败,但我被迫修复一个错误。
如果对象是代理对象,为什么原始返回未定义?
重要说明,这是在 redux 工具包切片函数中。