开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

如果在reducer中使用了太多的.then()，可能会导致获取不起作用的问题。这是因为.then()是Promise对象的方法，用于处理异步操作的结果。在reducer中，我们通常需要同步地处理action的数据，而不是异步地处理。

在Redux中，reducer是一个纯函数，它接收先前的状态和一个action作为参数，并返回一个新的状态。它应该是一个同步的操作，不应该包含异步的操作。

如果你在reducer中使用了太多的.then()，可能会导致以下问题：

异步操作无法正确地更新状态：由于.then()是异步的，它无法保证在reducer中正确地更新状态。这可能导致状态更新的顺序不正确，或者在某些情况下根本不会更新状态。
代码可读性下降：过多的.then()会导致代码变得复杂和难以理解。在reducer中，我们希望保持代码简洁和易于理解，以便其他开发人员能够轻松维护和理解代码。

为了解决这个问题，我们可以使用Redux中间件来处理异步操作。Redux中间件允许我们在action被dispatch到reducer之前进行一些额外的处理。最常用的Redux中间件是redux-thunk和redux-saga。

redux-thunk: 允许我们在action中返回一个函数而不是一个普通的对象。这个函数可以在内部进行异步操作，并在完成后再dispatch一个新的action。这样我们就可以在异步操作完成后更新状态。
redux-saga: 允许我们使用Generator函数来处理异步操作。它提供了一种更强大和灵活的方式来处理复杂的异步流程。通过使用redux-saga，我们可以将异步操作的逻辑从reducer中分离出来，使代码更加清晰和可维护。

使用Redux中间件可以解决在reducer中使用太多的.then()导致获取不起作用的问题。它们提供了一种更好的方式来处理异步操作，并确保状态的正确更新。在具体实现中，可以根据具体的业务需求选择合适的中间件。

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

腾讯云函数（云原生、后端开发）：https://cloud.tencent.com/product/scf
腾讯云数据库（数据库）：https://cloud.tencent.com/product/cdb
腾讯云服务器（服务器运维）：https://cloud.tencent.com/product/cvm
腾讯云CDN（网络通信）：https://cloud.tencent.com/product/cdn
腾讯云安全产品（网络安全）：https://cloud.tencent.com/solution/security
腾讯云音视频处理（音视频、多媒体处理）：https://cloud.tencent.com/product/mps
腾讯云人工智能（人工智能）：https://cloud.tencent.com/product/ai
腾讯云物联网（物联网）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发（移动开发）：https://cloud.tencent.com/product/mobdev
腾讯云对象存储（存储）：https://cloud.tencent.com/product/cos
腾讯云区块链（区块链）：https://cloud.tencent.com/product/baas
腾讯云游戏多媒体引擎（元宇宙）：https://cloud.tencent.com/product/gme

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

有帮助

没帮助

相关·内容

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

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

2020 0

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”中通过修改配置来获取更大的内存，这样就可以处理更多的数据，并且性能也会更好。

2461 0

大厂都在用的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.5K2 0

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

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

1062 0

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

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

2.8K2 0

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()。...以下示例演示了请求过多训练数据如何导致可怕的“计算值太大”错误：不好——不要采样太多数据！...分类器已经非常准确，所以没有太多的调整要做。

2881 0

聊一聊可组装框架（ TCA ）

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

1.8K2 0

React Hook技术实战篇

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

4.3K8 0

Map Reduce和流处理

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

3.1K5 0

angular4实战（4）ngrx

同react-redux 相似，ngrx的核心也是通过reducer来获取储存在store中的值（状态），通过action来改变store的中值（状态）。...关于action，reducer及store不再介绍。详情参考我之前的文章：http://blog.csdn.net/j_bleach/article/details/78070539。...但自己本地没有把这段代码跑成功，未报错，但不起作用，就用做简单的方法来实现reducer的汇总。...而在本例中，通过reducer返回的是一个新的值（一般是一个新的对象），新的值变化也会引起组件检查。...在本例中，如果把async这个过滤器取消的话，会造成一直loading，因为组件无法在监听到控制loading值的改变，也就无法更新视图了。

1.1K3 0

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实用程序，

1241 0

MobX or Redux?

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

5410 0

56. 精读《重新思考 Redux》

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

4522 0

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

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

1.5K3 0

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

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

3.1K3 0

Spark详解05架构Architecture架构

输出的 FileSegment 的位置和大小信息）存放到 mapOutputTrackerMaster 中的 mapStatuses 数据结构中以便以后 reducer shuffle 的时候查询。...，这一节描述 reducer（需要 shuffle 的 task ）是如何获取到输入数据的。...关于 reducer 如何处理输入数据已经在上一章的 shuffle read 中解释了。问题：reducer 怎么知道要去哪里 fetch 数据？ ?...由于 fetch 来的数据会先被放到内存作缓冲，因此一次 fetch 的数据不能太多，Spark 设定不能超过 spark.reducer.maxMbInFlight＝48MB。...如果使用了 FileConsolidation，diskStore 还需要 shuffleBlockManager 来提供 blockId 所在的具体位置。

9848 0

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 +

2K2 0

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

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

2.8K2 0

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

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

4.7K4 0

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

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

1.6K4 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭