开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如果我使用了太多的.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 有限制，以防止同时运行太多这样的聚合。在此示例中，“并发聚合过多”错误是由映射内的减少触发的：不好——不要这样做！...为了演示，这个例子通过强制（不必要地）整个图像集合到一个图块中使用了太多内存：不好——不要这样做！

2000 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

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

MobX or Redux?

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

5410 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 需要具备哪些习惯，他们都习以为常

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

4.7K4 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

聊聊flink的checkpoint配置

1 maxConcurrentCheckpoints用于指定运行中的checkpoint最多可以有多少个，用于包装topology不会花太多的时间在checkpoints上面；如果有设置了minPauseBetweenCheckpoints...，则maxConcurrentCheckpoints这个参数就不起作用了(大于1的值不起作用) enableExternalizedCheckpoints用于开启checkpoints的外部持久化，但是在...则在job canceled的时候会保留externalized checkpoint state failOnCheckpointingErrors用于指定在checkpoint发生异常的时候，是否应该...上一个checkpoint完成之后最小等多久可以出发另一个checkpoint)，maxConcurrentCheckpoints(用于指定运行中的checkpoint最多可以有多少个，如果有设置了minPauseBetweenCheckpoints...，则maxConcurrentCheckpoints这个参数大于1的值不起作用)，enableExternalizedCheckpoints(用于开启checkpoints的外部持久化，在job failed

5.1K3 2

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭