问题标签 [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.
javascript - 状态更改为未定义的值。我正在使用带有 redux-persist 的 redux-toolkit
我正在尝试在登录减速器中更改我的状态,但在state.user = data.user
操作之后,console.log
打印undefined。
我的授权切片:
我的店铺:
另外,当我将我的中间件属性从 configureStore 配置为
这会在我的控制台中打印以下错误:
react-redux - Redux Toolkit - 如何在切片之间共享操作
我正在使用 Redux Toolkit,并且有三个组件,每个组件都有一个切片:A、B、C。
我需要组件 A 来调度一个动作,组件 B 和 C 来对它做出反应。如何实现所有组件不相互依赖,类似于发布/订阅模式?
reactjs - 使用 createReducer 时在 slice reducer 之间共享数据
我有一个 ReactJS 应用程序,TypeScript
我redux
正在使用redux-toolkit
它来构建我的减速器。随着应用程序变得越来越大,我想开始重构我的减速器。
我的 redux 状态如下所示:
customers
和切片是独立的orders
,我可以轻松地为它们编写两个单独的减速器,然后将它们组合起来combineReducers
。
现在,我想进一步分解我的orders
减速器。
state1
并且state2
是完全独立的。state3
取决于来自 的数据state1
。state4
取决于来自state1
和的数据state2
。
有没有办法继续使用createReducer
from (或工具包中的一些其他功能)为切片中的redux-toolkit
每个嵌套切片orders
创建减速器?
当我开始重写我的 reducer 时orders
,这就是我目前所拥有的:
注意:我无法控制我的 redux 状态的结构。我并不完全依赖于使用redux-toolkit
,但需要一个很好的理由让我的团队远离它。
redux - 如何在 Redux Toolkit 中使用带有切片的 Redux Promise Middleware?
我正在使用slices
Redux Toolkit 的功能。您可能知道,一个切片action
为每个 created返回一个reducer
。
我想使用该redux-promise-middleware
库,对于给定的ACTION_TYPE
,它会创建三个可能的新操作:ACTION_TYPE_FETCHING
、ACTION_TYPE_FULFILLED
和ACTION_TYPE_REJECTED
。从 的角度来看,我该如何处理slices
?
javascript - 使用 redux 工具包时出现错误“在状态中检测到不可序列化的值” - 但不是正常的 redux
我正在尝试切换我正在构建的应用程序以使用 Redux Toolkit,并注意到当我从 createStore 切换到 configureStore 时出现此错误:
在四处寻找之后,我发现问题似乎出在我的自定义模型上。例如,品种数组是从品种模型创建的:
并使用它映射到一个字符串数组来创建我的 Varietal 数组,该数组进入我的状态:
当我切换出模型并将数组创建实用程序替换为返回对象的普通数组时,如下所示:
然后那个特殊的减速器的错误消失了,但是我在我的应用程序中都有这些自定义模型,在我开始将它们全部撕掉并重新编码它们只是为了能够使用我想在这里问的 Redux 工具包之前在我这样做之前真的是问题所在......
redux - 从 createAsyncThunk 调用其他操作
通常在一个 thunk 中,您最终会调用其他操作:
在createAsyncThunk
redux 工具包中,这并不是那么简单。实际上,您可以从结果中的操作中改变状态extraReducers
:
但我也希望有非异步方式来启动配方,这将需要在切片中使用减速器:
为了避免在两个地方编写相同的代码,我希望能够从 thunk 处理程序中调用简单的 reducer 函数。我从案例中简单地尝试了startRecipe(state)
和startRecipe
(它已经为鸭子导出而解构,所以我相当确定我指的是正确的函数),extraReducers
但它不起作用。
我目前的解决方案是_startRecipe
在切片之外定义,并在两种情况下都引用该函数
是否有一种“更好”的方式可以在您的中定义简单操作slice.reducers
并从 thunk 处理程序中引用它extraReducers
?
reactjs - 如何使用 redux 操作更新 d3 图?
我正在尝试使用在鼠标事件(mouseenter、mouseleave)中调用的 redux 操作来存储来自工具提示的数据。
问题:当鼠标光标位于元素(g 元素)上时,我只期望mouseenter
事件但mouseleave
也被触发。这会导致更新 redux 存储并在循环中重新渲染 react 组件。
我有一个 svg 元素,然后我附加 g 元素,它是圆形和文本的包装器。我在 g 元素上添加了事件监听器。
这是我的代码:
如何使用 redux 操作正确更新 d3 图?
感谢您的回答
reactjs - 无法访问使用 Redux Toolkit 创建的 ActionCreator 的 action.payload
我似乎无法访问在 redux-observable 管道中使用 RTK 切片创建的操作的有效负载。我想知道 redux-observable 是否设计为与 RTK 一起使用,以及我是否应该改用 typesafe-actions。
动作是从 slice.actions 中导出的。我试图将动作转换为 ActionCreatorWithPayload 但它没有帮助。
reactjs - 在 redux-toolkit 中使用 combine reducer 重置嵌套状态的最佳方法
假设我的商店带有嵌套的 combineReducers,如下所示
在这种情况下,如果我想将完整的客户状态重置为其初始状态,我该怎么做?
笔记: