开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在Redux中，在单个操作中分派多个reducers和cases是否是一种好的做法？

在Redux中，在单个操作中分派多个reducers和cases并不是一种好的做法。Redux是一个用于管理应用状态的JavaScript库，它通过使用单一的store和纯函数的reducers来实现状态的可预测性和可维护性。

在Redux中，reducers负责处理特定的action，并根据action的类型更新相应的state。每个reducer都应该是一个纯函数，接收当前的state和action作为参数，并返回一个新的state。这种设计使得reducers可以独立于彼此工作，并且易于测试和维护。

当在单个操作中分派多个reducers和cases时，会导致代码的复杂性增加，降低代码的可读性和可维护性。这样的做法可能会导致reducers之间的耦合性增加，使得代码难以理解和调试。同时，这也违背了Redux的设计原则，即每个reducer应该只处理特定的action类型。

相反，应该将每个reducer专注于处理特定的action类型，并将它们组合在一起以构建整个应用的状态树。这可以通过使用Redux提供的combineReducers函数来实现。combineReducers函数接收一个对象，其中包含各个reducer函数，并返回一个新的reducer函数，该函数将调用每个子reducer，并将它们的结果合并成一个新的state对象。

总结起来，为了保持代码的简洁性、可读性和可维护性，在Redux中，应该避免在单个操作中分派多个reducers和cases。相反，应该将每个reducer专注于处理特定的action类型，并使用combineReducers函数将它们组合在一起。这样可以确保代码的清晰性和可预测性，提高开发效率。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云游戏多媒体引擎（GME）：https://cloud.tencent.com/product/gme
腾讯云音视频处理（VOD）：https://cloud.tencent.com/product/vod

相关搜索:为什么在Akka.net中以类的形式发送消息是一种好的做法？在"except“块中执行操作是一种好的编码实践吗？在Djago中混合基于类和函数的视图是一种可接受的做法吗？在Django Rest框架中覆盖list()是一种好的做法吗？在Elasticsearch的生产部署中，将现场数据转换为true是一种好的做法吗？在Firestore中，在不存在的文档下使用子集合是一种好的做法吗？在JavaScript中检查对象属性的存在!obj[key]是一种好的做法吗？在jQuery中重定向到新页面是一种好的做法吗在MVVM的适配器中启动intent是一种好的做法吗？在python中手动退出线程是一种好的做法吗？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Rematch: Redux 的重新设计

在本文中，我们将探讨一些你可能一直在问自己的问题：你是否需要一个用于状态管理的库？ Redux 的受欢迎程度是否值得我们去使用？为什么或者为什么不值得？我们能否制定更好状态管理解决方案吗?...让我们看看使用React等基于组件的视图框架/库时的选项： 1. Component State (组件状态) 存在于单个组件内部的状态。在React中，通过setState方法更新state。...为什么使用 Redux 在表层之下，Redux 与 TJ 的根对象{}完全相同——只是包装在了一系列实用工具的管道(pipeline)中。在 Redux 中，不能直接修改状态。...简化 reducers Redux 中的 reducers 可以通过一个转换，让我们远离已经习惯但不必要且冗长的 switch 语句。...改变其中一个又是否会影响到另一个？ action creator 和 reducer 是同一枚硬币的两面。

1.5K5 0

【THE LAST TIME】从 Redux 源码中学习它的范式

也是给自己的查缺补漏和技术分享。前言「范式」概念是库恩范式理论的核心，而范式从本质上讲是一种理论体系。库恩指出：「按既定的用法，范式就是一种公认的模型或模式」。...上篇：从 Redux 设计理念到源码分析本文续上篇，接着看 combineReducers、applyMiddleware和 compose 的设计与源码实现至于手写，其实也是非常简单，说白了，「去掉源码中严谨的校验...combineReducers 从上一篇中我们知道，newState 是在 dispatch 的函数中，通过 currentReducer(currentState,action)拿到的。...其实即使我们上面手写的 reverse 部分。 reduce 是 es5 的数组方法了，对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。...总结所以回头看看，redux 其实就这么些东西，第一篇算是 redux 的核心，关于状态管理的思想和方式。第二篇可以理解为 redux 的自带的一些小生态。全部的代码不过两三百行。

3723 0

React中的Redux

Reducer拆分这里我们以redux中文文档中的todo应用为例来说明，在应用的需求中，有添加todo项，设置todo列表的过滤条件等多个action，同理我们就需要写多个reducer来描述状态是怎么改变的...传入Store 所有容器组件都可以访问 Redux store，所以可以手动监听它。一种方式是把它以 props 的形式传入到所有容器组件中。...状态（state）是一种数据结构，存储在store中的数据异步加载的页面的状态：“加载中；加载成功，展示列表；加载失败” 这三种状态。...事件列表展示过程中的数据，也就是：“开始加载；加载成功；加载失败”这三个事件。其实整个过程和之前使用promise来实现的异步操作是一样的。...在异步操作这块，我们建议使用 redux-saga 中间件来创建更加复杂的异步 action。其中涉及到es6中的Generators可以在文档中查看。

4K2 0

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

在Redux中编写测试听起来肯定有悖直觉。如果你使用了Redux，它可能看起来更加复杂。然而，在添加功能之前编写测试有助于编写更好的代码，因为你预先考虑了将使用的设计模式、体系结构和变量的名称。..., }); 编写 userSlice “slice”是应用程序中单个特性的Redux reducer逻辑和动作的集合，通常定义在单个文件中。...userSlice将有actions和reducer来执行CRUD操作。 slice的默认状态应该是一个空数组，毕竟，我们处理的是用户。...我们还没有定义userSlice、reducer和初始状态。在slice目录中，创建一个名为user.js的文件。...thunk是一个函数，它以store的dispatch方法作为参数，然后在API或副作用完成后使用它来dispatch同步操作。首先，让我们为这个特性编写测试。

1.9K3 0

redux 文档到底说了什么（下）

因此这里隆重介绍 redux 一直在推荐的 redux-toolkit，这是官方提供的一揽子工具，这些工具并不能带来很多功能，只是将上面的手动档都变成自动档了。...createStore 对比一下，configureStore 带来的好处是直接内置了 redux-thunk 和 redux-devtools-extension，这个 devtools 只要将 devTools...等等的方法，这些 API 用起来就和用 Sequlize 这个库来操作数据库没什么区别，不足的地方是 payload 一定要按照它规定的格式，如 updateOne 的 payload 类型就得这样的...网上有些声音是讨论该用 createAction + createReducer 还是直接上 createSlice 的。如果分不清哪个好，那就用 createSlice。...市面上还有很多诸如 redux-action, redux-promise, reduce-reducers等等的 redux 衍生品（redux 都快变一个 IP 了）。

7452 0

Redux（一）：基本概念

如果能将这些状态从单个组件剥离出来统一管理，将会更好的维护、拓展Web应用。 Redux就是JavaScript应用这样一个可预测化的状态管理容器。...随着应用规模的增长，所要维护的state树会变的很大，这样就需要把reducers拆分成多个reducer，每个reducer来维护状态树的一部分。...3、创建一个store 在redux中应该只有一个store，单一数据源，这一点很重要。redux向外暴露了一个createStore方法用来创建store。...例子中，无论是对象还是数组，并没有直接去修改属性会增加元素，返回的都是一个新的对象或数组，这一点很重要，因为在js中对象是按地址引用的，直接修改属性或push一个元素，引用地址并没有发生变化，这会导致出现一些难以控制的情况...意思就是：不能在一个已经卸载的组件上执行更新state的操作，这会导致内存泄漏，应该在componentWillUnmount生命周期中取消所有订阅和异步任务。

1.3K1 0

Redux框架之combineReducers() 用法讲解

combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个 reducer 调用...合并后的 reducer 可以调用各个子 reducer，并把它们的结果合并成一个 state 对象。state 对象的结构由传入的多个 reducer 的 key 决定。...通常的做法是命名 reducer，然后 state 再去分割那些信息，因此你可以使用 ES6 的简写方法：combineReducers({ counter, todos })。...这一点造成了很多疑问，因此现在建议在 reducers/index.js 里使用 combineReducers() 来对外输出一个 reducer。下面有示例说明。...使用 ES6 的默认参数值语法来设置初始 state 很容易，但你也可以手动检查第一个参数是否为 undefined。

5032 0

应用connected-react-router和redux-thunk打通react路由孤立

Redux 是负责组织 state 的工具，但你也要考虑它是否适合你的情况。...在下面的场景中，引入 Redux 是比较明智的：你有着相当大量的、随时间变化的数据你的 state 需要有一个单一可靠数据来源你觉得把所有 state 放在最顶层组件中已经无法满足需要了的确，这些场景很主观笼统...state 和组件自身的 props 计算得到新的 props，注入该组件，并且可以通过监听 store，比较计算出的新 props 判断是否需要更新组件。...同步操作只要发出一种 Action 即可，但是异步操作需要发出三种 Acion。...返回的函数的参数是dispatch和getState这两个 Redux 方法，普通的 Action Creator 的参数是 Action 的内容。

2.3K0 0

医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解

Redux 是一种架构模式（Flux 架构的一种变种），它不关注你到底用什么库，你可以把它应用到 React 和 Vue，甚至跟 jQuery 结合都没有问题。...而 React-redux 就是把 Redux 这种架构模式和 React.js 结合起来的一个库，就是 Redux 架构在 React.js 中的体现。...对React、Redux、React-Redux详细剖析 Redux Redux是一种架构模式，是由flux发展而来的。...很不幸到现在为止，还有很多人存在一个误区：根据文档中是否使用 switch 来决定是否使用它。...todo.completed }) } return todo }) }) 我们需要修改数组中指定的数据项而又不希望导致突变, 因此我们的做法是在创建一个新的数组后

3.5K1 0

从应用到源码-深入浅出Redux

引言大家好，这是一篇没有任何注水的 Redux 从入门到精通的源码解读文章。文章中的每一行代码都是笔者深思熟虑敲下的，欢迎对 Redux 感兴趣的同学共同讨论。文章篇幅较长，建议收藏逐步阅读。...需要额外注意的是，在 redux 中要求每个 reducer 函数中匹配到对应的 action 时需要返回一个全新的对象（两个对象拥有完全不同的内存空间地址）。...需要留意的一点是在通过 dispatch 触发 action 时多个 reducer 之间我刻意使用了流通这个关键字是有原因的，我们会在稍微详细解释到。...同时在 applyMiddleware 内部提供了一种可组合的机制，多个 middleware 可以通过 applyMiddleware 组合到一起使用。...在 Redux 中集成了所谓的 compose 方法，它的作用非常简单从右到左来组合多个函数。

1.3K1 0

用动画和实战打开 React Hooks（三）：useReducer 和 useContext

在之前的两篇教程中，我们可以说和 useState 并肩作战了很久，是我们非常“熟悉”的老朋友了。但是回过头来，我们真的足够了解它吗？...在根组件中集成最后，我们调整根组件，把之前实现的历史趋势图和修改后的 CountriesChart 集成到应用中。...而 Redux 的核心思想之一就是将状态放到唯一的全局对象（一般称为 Store）中，而修改状态则是调用对应的 Reducer 函数去更新 Store 中的状态，大概就像这样：上面这个动画描述的是组件...: number; } } 在根组件中定义 Reducer 和 Dispatch Context 这一次我们按照自顶向下的顺序，先在根组件 App 中配置好所有需要的 Reducer 以及 Dispatch...反观 Redux，它的核心思想就是将状态和修改状态的操作全部集中起来进行。有没有发现，这其实刚好对应了两种管理学思想 Context 和 Control？

1.4K3 0

必须要会的 50 个React 面试题（下）

什么是高阶组件（HOC）？高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。...flux Flux 是一种强制单向数据流的架构模式。它控制派生数据，并使用具有所有数据权限的中心 store 实现多个组件之间的通信。整个应用中的数据更新必须只能在此处进行。...使用 Redux 开发的应用易于测试，可以在不同环境中运行，并显示一致的行为。 37. Redux遵循的三个原则是什么？单一事实来源：整个应用的状态存储在单个 store 中的对象/状态树里。...它根据操作的类型确定需要执行哪种更新，然后返回新的值。如果不需要完成任务，它会返回原来的状态。 43. Store 在 Redux 中的意义是什么？...虽然用于封装 Router 中的多个路由，当你想要仅显示要在多个定义的路线中呈现的单个路线时，可以使用 “switch” 关键字。

3.5K2 1

Redux 包教包会（二）：趁热打铁，重拾初心

保存上述修改的代码，打开浏览器，你应该又可以点击单个待办事项来完成和重做它了： ?...Reducers 在 Redux 中实际上是用来处理 Store 中存储的 State 中的某个部分，一个 Reducer 和 State 对象树中的某个属性一一对应，一个 Reducer 负责处理 State...Redux 为我们提供了 combineReducers API，用来组合多个小的 reducer，我们在 src/reducers 文件夹下创建 index.js 文件，并在里面添加如下内容： import...我们在这一系列教程中首先提出了 Redux 的三大概念：Store，Action，Reducers： •Store 用来保存整个应用的状态，这个状态是一个被称之为 State 的 JavaScript...，到时候各种状态属性的操作夹杂在一起很容易造成混乱和降低代码的可读性，不利于维护，因此我们提出了 combineReducers 方法，用于切分 rootReducer 到多个分散在不同文件的保存着单一状态属性的

2.3K4 0

Flux --> Redux --> Redux React 基础实例教程

Flux Flux是一种概念思想，或者说是一种应用架构根据它的概念，一个应用中的数据流动应是单向的，且应用中的所有数据保存在一个位置，数据变化时保证视图也同步变化，保证了数据和视图的状态是一一对应起来的...什么时候用Redux Redux说简单简单，因为也就几个API，理解好概念就好用了；说复杂也复杂，因为它将一个应用分成了不同部分（action、处理action、store数据等），在正规的项目中是推荐将各部分区分到不同文件中的...开始用Redux 上面讲了那么多字，还是看代码来得实在这里先纯粹讲Redux，毕竟它和React是没啥关系的首先是环境配置，基本上都会使用ES6，所以Babel的支持是必须的然后是Redux的支持...4.7 多个React组件中的使用上面说的是单个React组件中的使用，实际使用中会有多个组件多个组件的使用类似单个，只不过需要注意两点中只能包含一个父级 mapStateToProps...4.7.8 在React-Redux中使用异步因Redux中操作的执行是同步的，如果要实现异步，比如某个操作用来发个异步请求获取数据，就得引入中间件来处理这种特殊的操作即这个操作不再是普通的值，而是一个函数

3.6K2 0

redux原理分析

前言相信很多人都在使用redux作为前端状态管理库进去项目开发，但仍然停留在“知道怎么用，但仍然不知道其核心原理”的阶段，接下来带大家分析一下redux和react-redux两个库的核心思想和API。...4.subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dipatch发起后依次执行 5.可以添加中间件对提交的dispatch进行重写3.redux的api有哪些?...合并多个reducers 4.applyMiddleware 洋葱模型的中间件,介于dispatch和action之间，重写dispatch 5.compose 整合多个中间件接下来我们来依次实现...上下文中，context是react组件特有的一种不用手动一层层传递props就能在组件树中传递数据的方式，这样就实现了store相对于react组件的全局化，所有组件都能对store进行修改，获取，监听了...connect组件接受一个component组件返回一个新的component组件，在connect最终返回的组件中获取store并将store设置为当前组件的state，并且在connect返回的组件中的

7342 0

React Native+React Navigation+Redux开发实用教程

触发action有两种方式：一种是通过mapDispatchToProps将dispatch创建函数和props绑定，这样就可以通过this.props.onThemeChange('#096')调用这个...dispatch创建函数来触发onThemeChange action了；另外一种方式是通过this.props中的navigation来获取dispatch，然后通过这个dispatch手动触发一个...在Redux+react-navigation场景中处理 Android 中的物理返回键在Redux+react-navigation场景中处理Android的物理返回键需要注意当前路由的所以位置，...+Redux打造高质量上线App中获取；问答 Redux是如何实现JS的可预测状态的管理？...当需要拆分数据处理逻辑时，你应该使用 reducer 组合而不是创建多个 store； redux一个特点是：状态共享，所有的状态都放在一个store中，任何component都可以订阅store中的数据

3.9K1 0

Taro 小程序开发大型实战（四）：使用 Hooks 版的 Redux 实现应用状态管理（上篇）

Footer 组件内的 FloatLayout 弹窗组件，像这种涉及到多个子组件进行通信，我们将状态保存到公共父组件中的方式在 React 中叫做 ”状态提升“。...的中间件 redux-logger 外，还有两个额外的包，这是因为在 Taro 中，Redux 原绑定库 react-redux 被替换成了 @tarojs/redux 和 @tarojs/redux-h5...•Action：发起修改 Store 中保存状态的动作，是修改状态的唯一手段。•Reducers：一个个的纯函数，用于响应 Action，对 Store 中的状态进行修改。...好的，复习了一下 Redux 的概念之后，我们马上来创建 Store，Redux 的最佳实践推荐我们在将 Store 保存在 store 文件夹中，我们在 src 文件夹下面创建 store 文件夹，并在其中创建.../post' 组合 User 和 Post Reducer 我们在之前将整个全局的响应逻辑分别拆分到了 src/reducers/user.js 和 src/reducers/post.js 中，这使得我们可以把响应逻辑拆分到很多个很小的函数单元

2K2 1

像数据库一样设计你的 redux 数据结构

使用索引可以从多个维度表现数据。最近我在RC聊天系统浏览关于 JavaScript 的一些讨论时，注意到了Kate Ray的一个问题：应该怎样在 redux 存储中结构化我的数据？...我在实践中得到了一些经验，通常在访问时间和迭代的难易程度之间做一些权衡。一些常见的方法如果你需要存储一些每个项目都带有id的数据，可以使用Array, Object, 或者对象数组来保存。...数组对象[{values}]：这是最常见的一种范式。它使迭代变得容易，但是不经过迭代和过滤就不能快速访问特定条目。....]},] 把它像数据库一样构造成由id对行进行索引的结构在学习redux的过程中，我在Monadical偶然发现了一种不同的方法，它使我们受益于简单的Object.values(state.categories...在后端很容易做到这一点，因为你很可能从数据库中提取数据，而数据库中已经存在id字段，可以直接将其作为键使用。索引的力量请注意，我们上面介绍的结构只是一些行的索引，索引是id。

1.3K2 0

redux原理是什么

前言相信很多人都在使用redux作为前端状态管理库进去项目开发，但仍然停留在“知道怎么用，但仍然不知道其核心原理”的阶段，接下来带大家分析一下redux和react-redux两个库的核心思想和APIredux1...4.subscribe是为store订阅监听函数，这些订阅后的监听函数是在每一次dipatch发起后依次执行 5.可以添加中间件对提交的dispatch进行重写3.redux的api有哪些?...合并多个reducers 4.applyMiddleware 洋葱模型的中间件,介于dispatch和action之间，重写dispatch 5.compose 整合多个中间件接下来我们来依次实现...上下文中，context是react组件特有的一种不用手动一层层传递props就能在组件树中传递数据的方式，这样就实现了store相对于react组件的全局化，所有组件都能对store进行修改，获取，监听了...connect组件接受一个component组件返回一个新的component组件，在connect最终返回的组件中获取store并将store设置为当前组件的state，并且在connect返回的组件中的

6223 0

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

因此，我们是否真的需要让一个状态对许多组件可用，或者我们是否可以将其保持在单个组件中, 在这两者之前取一个平衡是非常重要的。...（这也是 Redux 被批评的主要原因），所以让我们把它分解成几块：正如我提到的，Redux 是一个外部库，所以在进行任何操作之前，我们需要通过运行 npm i redux react-redux 来安装它...在代码中，你可以看到，对于每个 action，我们都声明了常量来代替普通的字符串（这是一个可以提高可维护性的好做法），以及一些仅返回一个 type 或者一个 type 和一个 payload 的函数。...Redux toolkit Redux toolkit 是一个建立在 Redux 之上的库，其目的是去除 Redux 产生的一些复杂性和模板。...是一种将 action 和 reducer 压缩为同一个的方法。

8.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭