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

如果我使用了太多的.thens,则在reducer中获取不起作用

在JavaScript的异步编程中,.then() 方法被广泛用于处理Promise对象的结果。当你在代码中过度使用 .then() 链时,可能会导致代码结构变得复杂且难以维护,这种情况通常被称为“回调地狱”。在Redux的reducer中,这种问题尤为明显,因为reducer应该是纯函数,不应该包含任何异步操作。

基础概念

Promise: 是一个代表了异步操作最终完成或者失败的对象。Promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。

Reducer: 在Redux中,reducer是一个纯函数,它接收当前的状态和一个动作,然后返回一个新的状态。Reducer不应该执行任何副作用,如API调用或异步操作。

问题原因

在reducer中使用 .then() 通常是不合适的,因为reducer应该是同步的,并且不依赖于外部状态。如果在reducer中尝试处理异步操作,比如等待Promise的结果,这将违反Redux的设计原则。

解决方案

  1. 使用中间件处理异步操作: 使用Redux Thunk或Redux Saga等中间件来处理异步逻辑。这些中间件允许你在action creators中编写异步代码,并在适当的时候分发同步的action。
  2. 使用中间件处理异步操作: 使用Redux Thunk或Redux Saga等中间件来处理异步逻辑。这些中间件允许你在action creators中编写异步代码,并在适当的时候分发同步的action。
  3. 保持reducer的纯净性: 确保reducer只处理同步逻辑,并且基于当前的state和action返回新的state。
  4. 保持reducer的纯净性: 确保reducer只处理同步逻辑,并且基于当前的state和action返回新的state。
  5. 避免深层嵌套的.then()链: 如果你必须处理多个连续的异步操作,可以考虑使用 async/await 来简化代码结构。
  6. 避免深层嵌套的.then()链: 如果你必须处理多个连续的异步操作,可以考虑使用 async/await 来简化代码结构。

应用场景

  • 当你需要从服务器获取数据并在应用状态中反映这些变化时。
  • 当你需要执行一系列依赖前一个操作结果的异步任务时。
  • 当你需要处理错误情况并更新UI以通知用户时。

通过上述方法,你可以有效地管理异步操作,同时保持Redux应用的清晰和可维护性。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Google Earth Engine(GEE)——缩放错误指南(聚合过多、超出内存、超出最大像素和超出内存限制)!

例如,考虑以下不可取的减少: 错误— 此代码不起作用!...如果没有,相应地增加scale(以米为单位的像素大小),或设置bestEffort为 true,以自动重新计算更大的比例。这样可以最大限度的获取你想要的图像,在不超出计算范围的前提下!!!...计算超时 假设您在计算中需要所有这些像素。如果是这样,您可以增加 maxPixels参数以允许计算成功。但是,Earth Engine 需要一些时间来完成计算。...Earth Engine 有限制,以防止同时运行太多这样的聚合。在此示例中,“并发聚合过多”错误是由映射内的减少触发的: 不好——不要这样做!...为了演示,这个例子通过强制(不必要地)整个图像集合到一个图块中使用了太多内存: 不好——不要这样做!

26000

Kylin Cube构建过程优化

因此强烈建议使用Hive的分区列(如果该分区列是日期)作为Cube的分区列。这对于数据非常多的表来说几乎是必须的,否则在执行这一步骤的时候,Hive每次都需要扫描所有的文件,会耗费很多时间。...为了使这些数据分布的更均匀一些,Kylin增加了该步骤用来重新分配各个数据文件中的数据。...如果reducer发生了OOM错误,通常意味着cuboid的维度组合数太多或者默认的yarn内存分配不能满足需求。...如果你发现reducer的数目很少,可以通过在kylin.properties中对配置项“kylin.job.mapreduce.default.reduce.input.mb”设置更小的值,来获取更多的集群资源...如果集群有足够大的内存,可以在“conf/kylin_job_conf_inmem.xml”中通过修改配置来获取更大的内存,这样就可以处理更多的数据,并且性能也会更好。

24910
  • 大厂都在用的Hive优化

    hive.auto.convert.join.noconditionaltask.size:如果hive.auto.convert.join.noconditionaltask是关闭的,则本参数不起作用...如id=1行进入Reducer R1,id = 2的行进入Reducer R2的行等。这些Reducer产生A B的交集并输出。Reducer R4只从A获取行,不产生查询结果。...如果有太多的mapper或者reducer任务,会导致启动、调度和运行作业过程产生过多的开销,而设置的数量太少,那么就可能没有重分利用好集群内在的并发性。...操作树中所标识的统计信息,需要分区级别的基本统计,如每个分区的行数、数据量大小和文件大小等。分区 统计信息从元数据存储中获取。如果存在很多分区,要为每个分区收集统计信息可能会消耗大量的资源。...如果存在很多列,要为每个列收 集统计信息可能会消耗大量的资源。这个标志可被用于禁止从元数据存储中获取列统计。

    1.6K20

    关于条件筛选列表页开发的一些总结

    界面如下: 页面通常是两部分,一部分是筛选条件,一部分是数据列表,通常情况下,筛选数据发生变化,数据列表也会发生变化,此时我一般用reducer将第一部分的数据抽离出来,以上面页面为例,通常我会抽象出6...什么技巧呢,我用了两个useEffect函数: useEffect(() => { initData() }, []); useEffect(() => {...思考一下如果不用reducer我们会怎么做呢,首先在useffect函数中初始化筛选条件,然后根据初始条件,路由参数,初始化列表。...然后分别监听筛选条件,每个条件发生变化,都需要根据变化的条件重新获取数据,理论上不难,但是如果条件太多就会定义大量的useState,代码量比较繁琐,此时用reducer就比较合适了,所有筛选条件集中在...reducer中,筛选条件的组件中的状态也绑定reducer, 简直不要太清晰,reducer等于维护了一个状态树。

    10920

    一天梳理React面试高频知识点

    key使 React处理列表中虛拟DOM时更加高效,因为 React可以使用虛拟DOM上的key属性,快速了解元素是新的、需要删除的,还是修改过的。...因此在这些阶段发岀Ajax请求显然不是最好的选择。在组件尚未挂载之前,Ajax请求将无法执行完毕,如果此时发出请求,将意味着在组件挂载之前更新状态(如执行 setState),这通常是不起作用的。...编译版本中 React会忽略 propType 验证以及其他的告警信息,同时还会降低代码库的大小,React 使用了 Uglify 插件来移除生产环境下不必要的注释等信息在 Reducer文件里,对于返回的结果...如果我们的数据请求在组件挂载之前就完成,并且调用了setState函数将数据添加到组件状态中,对于未挂载的组件则会报错。...在React 17之前,如果使用了JSX,其实就是在使用React, babel 会把组件转换为 CreateElement 形式。

    2.8K20

    Google Earth Engine(GEE)——R 语言 Google 地球引擎20个基本案例分析

    $addLayer(ee_l8) } Map$centerObject(ee_l8) Reduce('+', display_l8ts) 相反,map()是服务器函数和客户端功能在传递给 map() 的函数中不起作用...10.如果需要剪辑复杂的集合,使用clipToCollection() 如果您确实需要剪辑某些内容,并且要用于剪辑的几何图形位于集合中,请使用clipToCollection(): ecoregions...使用reduceNeighborhood() 中的优化 如果您需要执行卷积并且不能使用fastDistanceTransform(),请使用 中的优化reduceNeighborhood()。...以下示例演示了请求过多训练数据如何导致可怕的“计算值太大”错误: 不好——不要采样太多数据!...分类器已经非常准确,所以没有太多的调整要做。

    35310

    聊一聊可组装框架( TCA )

    ,以及在不同界面调用这些状态,使一个界面内的变化可以立刻反映在另一个界面中。...,不可能要求所有的 Reducer 都是纯函数,对于保存数据、获取数据、网络连接、记录日志等等操作都将被视为副作用( TCA 中称之为 Effect )。...在实践中,对同一个 Action 的调用,采用 Reducer Protocol 的方式所创建的调用栈更浅更加完善的依赖管理采用了全新的 DependencyKey 方式来声明依赖( 与 SwiftUI...尽管了解 TCA 的用法并不需要太多的时间,但如果开发者无法真正地掌握其内在的组装逻辑,很难写出让人满意的代码。...如果你有订阅 Point Free 课程的打算,可以考虑使用我的 指引链接[15]。

    1.9K20

    React Hook技术实战篇

    如果包含变量的数组为空,则在更新组件时挂钩不会运行,因为它不必监视任何变量.更多关于Effect Hook的详情,点击此处 手动触发Hook 此时, 组件安装成功后会获取数据, 现在, 我们希望可以有个点击按钮可以触发...这也就是使用Effect Hook来获取数据的方式, 关键在useEffect的第二个参数所依赖的项, 当依赖的项发生改变时, 第一个参数的内的函数也会被再次触发, 如果没用发生改变, 则不会再次执行,...而使用自定义Hook的好处, 就说组件本身不需要对于Hook有太多的了解, 只需要获取一个组件所需要的变量就可以....例子中, 获取的数据和loading状态没有发生改变, 不过都聚合到了reducer中, 又Reducer Hook集中管理. const dataFetchReducer = (state, action...,可以通过dispatch函数将数据发生发送到reducer功能上.而在自定义的Hook中返回的对应的状态.

    4.3K80

    Map Reduce和流处理

    在Map/Reduce的标准模型中,reduce阶段在map阶段完成之前无法启动。而且在下载到reducer之前,所有处理过程的中间数据都保存在磁盘中。所有这些都显著增加了处理的延迟。...在本篇文章中,我尝试了一些基于Map/Reduce模型的执行低延迟并行处理的技术。...我并不担心Hadoop在线原型(HOP)所采用的方法的向后兼容性 。 长时间运行 第一种修改方法是使mapper和reducer长时间运行。...不幸的是,低延迟需要尽快发送数据,因此没有太多时间使大量累积操作可以完成。...之后,它会调用用户定义的merge()函数将切片值与范围值合并。如果范围需要刷新(例如达到跳转窗口边界),将调用init()函数来获取刷新的范围值。

    3.1K50

    Redux Toolkit

    它最初的创建是为了帮助解决关于 Redux 的三个常见问题: “配置 Redux 存储太复杂了” “我必须添加很多包才能让 Redux 做任何有用的事情” “Redux 需要太多样板代码” 我们无法解决所有用例...Redux Toolkit 还包括一个强大的数据获取和缓存功能,我们称之为“RTK Query”。它作为一组单独的入口点包含在包中。它是可选的,但可以消除您自己手写数据获取逻辑的需要。...安装 使用 React 和 Redux 启动新应用程序的推荐方法是使用官方 Redux+JS 模板或Redux+TS 模板来创建 React App,它利用了Redux Toolkit和 React Redux...函数的对象、切片名称和初始状态值,并自动生成切片reducer,并带有相应的动作创建者和动作类型。...;//默认导出 createEntityAdapter: 生成一组可重用的 reducer 和 selector 来管理 store 中的规范化数据 重新选择库中的createSelector实用程序,

    13010

    56. 精读《重新思考 Redux》

    ,因为 reducers 是分散的,如果在 reducers 中赋值,要利用 es 的默认参数特性,看起来更像业务思考,而不是 redux 提供的能力。...,dispatch 是 import 进来的(全局变量),而 redux 的 dispatch 是注入进来的,乍一看似乎 redux 更合理,但其实我更推崇 rematch 的方案。...经过长期实践,组件最好不要使用数据流,项目的数据流只用一个实例完全够用了,全局 dispatch 的设计其实更合理,而注入 dispatch 的设计看似追求技术极致,但忽略了业务使用场景,导致画蛇添足,...{ state += 1; return state; } } }; 但是当 state 为非对象时,immer 将不起作用,所以最好能养成 return state...4 总结 重复一下作者提出工具质量的公式: 工具质量 = 工具节省的时间/使用工具消耗的时间 如果一个工具能节省开发时间,但本身带来了很大使用成本,在想清楚如何减少使用成本之前,不要急着用在项目中,这是我得到的最大启发

    45720

    MobX or Redux?

    如果你使用过 React 一段时间,你也许会熟悉一些解决此类问题的方案,比如 Props 和 HOC。但是这类方案需要重新组织你的组件结构,这可能会很麻烦,使你的代码难以理解。...每个生命周期常常包含一些不相关的逻辑。例如,组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。...2、函数式编程,在 Reducer 中,接受输入,然后输出,不会有副作用发生,幂等性。 3、可追踪性,很容易追踪产生 BUG 的原因。...不会跟 Redux 一样写非常多的样板代码。 3、使组件更加颗粒化拆分。 缺点 1、过于自由,MobX 提供的约定及模版代码很少,如果团队不做一些约定,容易导致团队代码风格不统一。...2、MobX 3、React 4、Redux 博客 欢迎关注我的博客

    55000

    用动画和实战打开 React Hooks(三):useReducer 和 useContext

    但实际上在 React 的源码中,useState 的实现使用了 useReducer(本文的主角,下面会讲到)。...在类组件中,我们可以通过 Class.contextType 属性获取到最近的 Context Provider,那么在函数式组件中,我们该怎么获取呢?答案就是 useContext 钩子。...dispatch 最后在渲染时用 AppDispatch.Provider 将整个应用包裹起来,传入 dispatch ,使子组件都能获取得到 在子组件中通过 Dispatch 修改状态 现在子组件的所有状态都已经提取到了根组件中...提示 如果你熟悉 Redux,会发现我们的重构存在一个小小的遗憾:子组件只能通过传递 Props 的方式获取根组件 App 中的 state 。...聊到这里,我想你心里已经有自己的答案了。如果你想要分享的话,记得在评论区留言哦~ 想要学习更多精彩的实战技术教程?来图雀社区[17]逛逛吧。

    1.5K30

    【Web技术】639- Web前端单元测试到底要怎么写?

    这就是写测试用例的基本套路。 我们在写测试用例时尽量保持用例的单一职责,不要覆盖太多不同的业务范围。测试用例数量可以有很多个,但每个都不应该很复杂。...selectors selector 的作用是获取对应业务的状态,这里使用了 reselect 来做缓存,防止 state 未改变的情况下重新计算,先看一下表格的 selector 代码: import...下面来讲下稍微有点复杂的地方,sagas 部分。 sagas 这里我用了 redux-saga 处理业务流,这里具体也就是异步调用 api 请求数据,处理成功结果和错误结果等。...组合好参数并调用对应的 api 层。 如果正常返回结果,则发送成功 action 通知 reducer 更新状态。 如果错误返回,则发送错误 action 通知 reducer。...所以它还在我的手腕上。在写代码时,我用余光瞟见它。它一直提醒我,我做了写出整洁代码的承诺。

    3.1K30

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

    这时候我们发现传入的函数很长,直接放在 useSelector 里不好看,而且如果别的组件也要获取 todos 那还要再写一遍,因此我们可以把这个函数提取出来,变成这样: // selectors.ts...handler(todos, action) : todos } 使用了 immer 之后,数组的 push 和直接赋值写法都可以直接用了,代码就感觉更好看一些。...const store = createStore(reducer, applyMiddleware(ReduxThunk)) 然后就可以快乐使用了,这里的使用只需要将 action creator...从上面的例子也可以看到,redux 的 API 就只用了 createStore combineReducers applyMiddleware react-redux 的 API 只用了 Provide...很多人觉得 redux 很让人头疼的点很多是因为:用 redux 管理状态要写的代码实在是太多了,像上面的selecor + actionCreator + actionType + reducer +

    2K20

    成为一名高级 React 需要具备哪些习惯,他们都习以为常

    在对抗糟糕的渲染性能时,你最强大的武器是React.memo,它只在组件的道具更改时才重新呈现组件。这里的挑战是确保道具不会在每次渲染中改变,在这种情况下React。备忘录不起作用。...对于这个问题,没有“一刀切”的解决方案,所以您需要分析您的具体情况,以找出问题所在。我要说的是,如果你的效果依赖于一个函数,那么将该函数存储在ref中是一个有用的模式。...将你的光标移动到一个可点击的元素上应该会稍微改变元素的颜色,并使光标变成一个“指向手”,也就是CSS中的指针。将鼠标悬停在一个引导按钮上,看看这些最佳实践的运行情况。 不要隐藏重要的UI元素。...通过使用一个抽象出数据获取细节的库,您将为自己省去无数的麻烦。我个人更喜欢React Query,不过RTK Query、SWR和Apollo也是很好的选择。...虽然像Next.js这样的框架使SSR变得更容易,但仍然不可避免地存在必须处理的复杂性。如果您需要使用SSR进行SEO或在移动设备上快速加载,那么请务必使用它。

    4.7K40

    前端二面高频react面试题集锦_2023-02-23

    因为 dom 的描绘非常消耗性能,如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法,可以极大的提高性能。...JSX 是一个 JavaScript 的语法扩展,或者说是一个类似于 XML 的 ECMAScript 语法扩展。它本身没有太多的语法定义,也不期望引入更多的标准。...即使使用了 JSX,也会在构建过程中,通过 Babel 插件编译为 React.createElement。所以 JSX 更像是 React.createElement 的一种语法糖。...树比对:由于网页视图中较少有跨层级节点移动,两株虚拟 DOM 树只对同一层次的节点进行比较。 组件比对:如果组件是同一类型,则进行树比对,如果不是,则直接放入到补丁中。...为了使整个更新过程可随时暂停恢复,节点与树分别采用了 FiberNode 与 FiberTree 进行重构。fiberNode 使用了双链表的结构,可以直接找到兄弟节点与子节点。

    2.8K20

    6个关于Reduce() 应用场景的用例

    它是如何工作的? reducer 函数逐个遍历数组元素。在每一步中,reducer 函数将当前数组值添加到上一步的结果中,直到没有更多元素要添加。 参数是什么? 参数是回调函数和可选的初始值。...在本文中,我将向你展示 JavaScript 中 reduce() 方法的6个用例。...下面的函数有一个不好的地方。如果你给出多个出现奇数次的整数,它将不起作用。...JavaScript 中的 reduce() 也是一个有用的内置函数。如果你知道如何使用它,它是强大的。它可以帮助你编写较少数量的代码行,如汇总价格的示例。...综上所述,本文reduce()的用例如下: 对数组元素求和 展平数组 创建管道 从数组中获取对象 找出出现奇数次的整数 查找给定数组的最大子数组和。

    1.6K41
    领券