首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Redux toolkit -不能使用同一操作类型的两个reducers调用addCase

Redux Toolkit是一个开发工具集,用于简化Redux应用程序的开发流程。它提供了一组可重复使用的函数,帮助开发人员更轻松地编写Redux代码,并且对于大多数常见用例,它也减少了样板代码的编写量。

在Redux Toolkit中,使用createSlice函数创建reducer和action。createSlice接受一个包含了初始化状态和一组带有reducers字段的对象作为参数,其中每个reducers字段都是一个带有action类型和对应处理函数的对象。然后,createSlice会自动生成相应的reducer函数和action创建函数。

根据Redux Toolkit的设计理念,不建议在同一操作类型的多个reducers中调用addCaseaddCase用于在reducer中添加处理特定action的逻辑,由于同一操作类型的多个reducers会导致代码逻辑混乱和难以维护,因此Redux Toolkit鼓励开发人员使用单个reducer来处理特定的操作类型。

对于Redux Toolkit中的reducers,我们可以使用createReducer函数来创建一个纯粹的reducer函数,该函数接受一个带有action类型和对应处理函数的对象,类似于传统的Redux代码。但是,使用createReducer时,我们需要手动处理action类型的逻辑。如果需要处理复杂的逻辑,可以在单个reducer函数中编写条件分支,或者将复杂的逻辑抽取到单独的函数中。

对于createSlice创建的reducer,每个action类型对应的处理逻辑会自动由Redux Toolkit处理。这种方式更加简洁和易于维护,推荐使用createSlice来创建reducer。

总结来说,根据Redux Toolkit的设计原则,不建议在同一操作类型的两个reducers中调用addCase,而是推荐使用单个reducer来处理特定的操作类型。对于复杂的逻辑,可以在单个reducer函数中编写条件分支,或者将复杂的逻辑抽取到单独的函数中。

参考链接:

  • Redux Toolkit官方文档:https://redux-toolkit.js.org/
  • createSlice文档:https://redux-toolkit.js.org/api/createSlice
  • createReducer文档:https://redux-toolkit.js.org/api/createReducer
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

redux 文档到底说了什么(下)

上一篇文章主要介绍了 redux 文档里所用到基本优化方案,但是很多都是手工实现,不够自动化。这篇文章主要讲的是怎么用 redux-toolkit 组织 redux 代码。...因此这里隆重介绍 redux 一直在推荐 redux-toolkit,这是官方提供一揽子工具,这些工具并不能带来很多功能,只是将上面的手动档都变成自动档了。...... }) 使用 builder.addCase 来添加 extraReducer case,这种做法仅仅是为了 TS 服务,所以你喜欢之前 toString 写法也是没问题。...等等方法,这些 API 用起来就和用 Sequlize 这个库来操作数据库没什么区别,不足地方是 payload 一定要按照它规定格式,如 updateOne payload 类型就得这样...市面上还有很多诸如 redux-action, redux-promise, reduce-reducers等等 redux 衍生品(redux 都快变一个 IP 了)。

78320
  • 我是这样在 React 中实践 TDD 编程

    Redux中编写测试听起来肯定有悖直觉。如果你使用Redux,它可能看起来更加复杂。 然而,在添加功能之前编写测试有助于编写更好代码,因为你预先考虑了将使用设计模式、体系结构和变量名称。...基本上,使用Redux,我们想执行CRUD操作。...userSlice将有actions和reducer来执行CRUD操作。 slice默认状态应该是一个空数组,毕竟,我们处理是用户。...thunk是一个函数,它以storedispatch方法作为参数,然后在API或副作用完成后使用它来dispatch同步操作。 首先,让我们为这个特性编写测试。...我们刚刚使用Redux、thunk和axios mock编写了一些测试 对你来说有点挑战吗?添加诸如删除用户、修改以及检索用户等功能。 结论 在本文中,我们快速介绍了使用ReduxTDD。

    1.9K30

    如何提高redux开发效率?当然是redux-tookit啦!

    ,然后 将 redux 和 react 连接使用。整个流程繁琐,写起来代码冗余。 react-redux 创建仓库,文件目录如下: 好怀念使用 vuex 创建写仓库日子..........# 什么是 redux-toolkit redux-toolkit 是官方推荐编写 redux 逻辑方法,简化了 redux 配置过程,无需再创建 actions、reducer ,更大程度方便使用...redux 仓库 # 基本使用 redux-toolkit 使用步骤,可分为如下 5 步 1、安装 redex-toolkit 2、创建 slices 3、创建 store 4、将 Redux 连接到...它定义了一部分状态和与该状态相关操作。...redux 使用状态和操作:在组件中,可以使用 useSelector 和 useDispatch 钩子来访问状态和触发 action。

    25520

    Redux介绍及源码解析

    同时 Redux 利用纯函数简单明了特点, 在 Flux 架构基础上进行了优化和功能增强 (支持中间件、异步等), 降低了复杂度, 同时还提供强大工具库支持 (React-ReduxRedux-Toolkit...整体Store创建函数, 不过现在推荐使用redux-toolkit legacy_createStore, // 跟createStore一样 combineReducers, // 不同reducer...action 类型, 因为在读其他源码时会用到, Redux 内置了三种类型 action, 使用者可以直接在自己定义 reducer 中使用const ActionTypes = { INIT...中间件可以进行各种异步操作、日志记录等等, 比如说用最多中间件应该就是 redux-thunk, 这是与 Flux 重要区别之一....当然, 现在官方已经开始推荐使用 redux-toolkit, 他是基于 Redux 最佳实践, 简化了 Redux 编写调用, 他采用了函数式、柯里化等编程思维, 具体差异可以参考官方说明.

    2.5K20

    Redux 做状态管理,真的很简单🦆!

    本文通过实际案例反向释义 Redux名词概念,同时借助 @reduxjs/toolkit 模块简化 Redux 使用,希望通过今天分享可以帮助大家打开心结,抱抱 Redux,提升工作效率,从此不加班...@redux/toolkit 显著提升了研发效率,降低了研发使用心智负担!...当然,想要了解更多关于 @redux/toolkit 便捷 API,推荐阅读官方文档: @redux/tookit API 使用手册[2] @redux/tookit API 使用手册 ——...简单总结一下: 推荐在 React 项目中使用 Redux 作为状态管理 需要掌握 Redux设计思想 推荐使用 @redux-toolkit,可降低心智负担,显著提升研发效率 当掌握 @redux-toolkit.../usage/usage-guide [3]@redux/tookit API 使用手册 —— TypeScript 类型相关: https://redux-toolkit.js.org/usage

    3.4K40

    如何在 React 应用中使用 Hooks、Redux 等管理状态

    总结一下,我们只需要: 一个 reducer,合并所有可能状态变化函数 一个 dispatch 函数,将修改动作传递给 reducer 这里问题是, UI 元素将不能像以前那样通过用一个值调用 setState...(这也是 Redux 被批评主要原因),所以让我们把它分解成几块: 正如我提到Redux 是一个外部库,所以在进行任何操作之前,我们需要通过运行 npm i redux react-redux 来安装它...要知道,你也可以将不同 reducers 合并然后传递给同一个 store,这样你就可以将关注点分离到不同 reducers 中。...react-redux 来安装它 在我们 store 中,我们从 Redux toolkit 中导入 configureStore 函数,通过调用此函数来创建 store,并将一个带有 reducer...提到 Redux Thunk 和 Redux Saga Redux thunk 和 Redux Saga 是两个Redux 一起使用很流行中间件库; 具体来说,Thunk 和 Saga 都是为了处理副作用或异步任务所使用

    8.5K20

    Redux】:Redux 指北

    : 状态很多、很复杂 一个状态可能要在多个地方使用 多个地方可能会更新同一个状态 多个地方状态展示要能够及时得到同步 状态变动之间存在联动关系(比如:如果要改A,那么B、C、D也得跟着改;如果改B,那么...C、D、E要跟着改) 存在“切面”需求 系统有类似“记录操作历史”需求,系统中可能有 N 个功能点都需要提供操作日志记录功能,想在统一地方进行处理,而不是将日志记录功能分散到 N 个功能点上。...比如只有在做 xx、yy、zz 等操作时候,才需要做 kk,希望能在统一位置上处理,而不是将逻辑分散到 xx、yy、zz 等操作处。...使用 Redux 是个好选择 但是需要注意,如果用了 Redux,需要把应用所有状态都存进去么? NO....Redux Toolkit 是官方提供为简化 Redux 开发而退出工具箱。

    1.6K40

    ReactReactNative 状态管理: redux 如何使用

    首先来看下 redux 怎么使用。...最后创建了两个函数:DISPATCH_ADD_TODO 和 DISPATCH_DELETE_TODO,它们用于分发数据变更操作,简化后续 connect 里代码。...参数是先前状态 state 和要执行行为 action,根据 action type 行为类型,返回不同数据。 需要注意是,reducer 中不能修改老数据,只能新建一个数据。...第二个参数 mapDispatchToProps 用于返回当前 UI 组件需要向外分发状态操作行为,这里我们需要分发两个行为:添加 todo 和删除 todo,通过调用第二步中创建 DISPATCH_ADD_TODO...如果要分析某个状态修改操作,在 reducer 里增加日志即可定位到,这就是 redux 宣称优势:“可追溯”。

    1.3K20

    通过五个真实应用场景,深入理解如何使用 TypeScript 枚举(enum)

    三、在 Redux Toolkit使用枚举 Redux Toolkit 是一个流行状态管理库,特别适用于 React 应用。它大量使用 TypeScript 来确保类型安全。...在 Redux Toolkit 中,管理这些状态非常常见。 在 Redux Toolkit 中应用枚举 假设我们有一个 Redux slice 来管理异步数据获取操作状态。...使用 createSlice 创建了一个名为 data slice,包含初始状态和 reducers。...希望这个例子能帮助你更好地理解如何在 Redux Toolkit使用枚举来管理异步操作状态。...四、使用枚举作为判别联合类型 这个例子展示了如何使用枚举来定义两个可能形状:圆形(Circle)和矩形(Rectangle)。这是确保在处理不同形状时类型安全基础。

    27710

    Redux与前端表格施展“组合拳”,实现大屏展示应用交互增强

    Redux 是 JavaScript 状态容器,提供可预测化状态管理。它可以用在 react、angular、vue 等项目中, 但与 react 配合使用更加方便一些。...Redux核心理念就是如何根据这些 action 对象来更新 state,强制使用 action 来描述所有变化带来好处是你可以清晰地知道应用中到底发生了什么。...核心数据源为一组销售数据,上方三个仪表板以及下方表格组件共享同一个数据源,实现了数据明细显示以及各维度数据统计。...将 Redux 添加到你 React 应用程序 1.引入相关库 "@reduxjs/toolkit": "^1.9.1", "react-redux": "^7.2.0", "redux": "^4.0.5...为reducers添加了两个方法updatesales和importSales,用于在销售明细数据更新或者导入这两种情况时,来同步recentSales。

    1.6K30
    领券