开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

带有NgRx选择器的RxJS groupBy永远不会完成

是一个关于RxJS和NgRx的问题。下面是对这个问题的完善且全面的答案：

RxJS是一个用于处理异步数据流的JavaScript库。它提供了一套丰富的操作符，可以方便地处理事件序列、异步请求、数据变换等。而NgRx是基于RxJS的状态管理库，用于管理Angular应用中的状态。

在RxJS中，groupBy操作符用于将源Observable的数据按照指定的键进行分组。它返回一个Observable，该Observable发出一个由分组Observable组成的Map。每个分组Observable都会发出与其对应的键相匹配的数据。

然而，当使用带有NgRx选择器的RxJS groupBy时，可能会出现永远不会完成的情况。这是因为NgRx选择器是一个纯函数，它从应用状态中选择特定的数据。当选择器的输入参数没有发生变化时，选择器会返回上一次的结果，而不会重新计算。

当使用groupBy操作符时，它会将源Observable的数据按照键进行分组，并将每个分组Observable传递给选择器进行处理。由于选择器的输入参数没有发生变化，选择器会返回上一次的结果，而不会重新计算。因此，groupBy操作符永远不会完成，因为选择器的结果没有改变。

解决这个问题的方法是使用RxJS的pipe操作符，将groupBy操作符与其他操作符结合使用，以确保选择器的输入参数发生变化。例如，可以使用mergeMap操作符将分组Observable转换为新的Observable，然后使用toArray操作符将分组Observable的数据收集到一个数组中。这样，选择器的输入参数会发生变化，从而使groupBy操作符能够完成。

总结起来，带有NgRx选择器的RxJS groupBy永远不会完成是因为选择器的输入参数没有发生变化。解决这个问题的方法是使用RxJS的pipe操作符，结合其他操作符对分组Observable进行转换，以确保选择器的输入参数发生变化。

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

腾讯云云原生产品：https://cloud.tencent.com/product/tke
腾讯云数据库产品：https://cloud.tencent.com/product/cdb
腾讯云服务器运维产品：https://cloud.tencent.com/product/cvm
腾讯云人工智能产品：https://cloud.tencent.com/product/ai
腾讯云物联网产品：https://cloud.tencent.com/product/iotexplorer
腾讯云移动开发产品：https://cloud.tencent.com/product/mab
腾讯云存储产品：https://cloud.tencent.com/product/cos
腾讯云区块链产品：https://cloud.tencent.com/product/baas
腾讯云元宇宙产品：https://cloud.tencent.com/product/tencent-virtual-world

相关搜索:Angular 'ng new‘命令永远耗时；永远不会完成软件包的安装 Firebase android应用程序安装程序永远不会完成“与我们的服务器通信”的步骤 Firebase Auth UI Android，getIdToken()返回的任务永远不会完成 Kubernetes :超过5分钟才能完成的InitContainer永远不会结束并重新启动 RegressionGLM/poisson测试永远不会完成模型的生成以及如何读取h2o日志 rxjs forkJoin永远不会完成 Xcode永远不会完成构建并耗尽计算机上的内存为什么DAO房间的Flowable<List>方法永远不会完成？为什么我的IOCompetionCallback永远不会在IO完成端口上执行？为什么我的测试功能模拟时间在某些环境中永远不会完成？

相关搜索:

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

有帮助

没帮助

相关·内容

Angular 接入 NGRX 状态管理

注：图片来自ngrx.io/guide/store NGRX 是 Angular 实现响应式状态管理的应用框架。...； @ngrx/store-devtools：调试的工具，需要配合github.com/reduxjs/red… 使用； @ngrx/schematics：提供使用 NGRX 的 CLI 命令，需要与...updateApi ： import { Injectable } from '@angular/core'; import { Observable, map, timer } from 'rxjs...UpdateUser: emptyProps(), }, }); 完成副作用编写：在 UserEffects 中注入 UserService 后开始创建副作用，总共 4 步操作： import {.../actions/user.actions'; import { exhaustMap, map } from 'rxjs'; @Injectable() export class UserEffects

1851 0

一个Angular 5教程：一步一步指导实现你的第一个Angular 5应用程序

State是一个单一的，不可变的数据结构 - 至少Ngrx为我们实现它的方式。Ngrx是由Redux提供灵感的“RxJS支持Angular应用程序的状态管理库”。 Ngrx的灵感来自Redux。...提供了一个记录器，并为我们的卡阵列创建了选择器功能。...因此，“对结果的评估不会导致任何语义上可观察到的副作用或输出，例如可变对象的突变或输出到I / O设备”......我们能做什么？答案在这个定义中是正确的。Ngrx对救援的副作用。...RxJS是JavaScript的Reactive Extensions库，允许我们使用Observables进行操作，Observables是替代我们独立承诺的事件流。什么是NgRX？...NgRX是一种管理应用程序状态的模式。这是一个支持Angular应用程序的RxJS驱动的状态管理库。它使我们能够拥有单一的应用程序状态，将所有组件连接在一起，并为我们的应用程序提供可预测和一致的行为。

42.5K1 0

调试 RxJS 第2部分: 日志篇

它显示了所发生的一切：订阅组合 observable 会并行订阅每个用户 API 请求的 observable 请求完成的顺序是不固定的 observables 全部完成全部完成后，组合 observable...当编写 redux-observable 的 epics 或 ngrx 的 effects 时，我见过一些开发者的代码大概是这样的: ? 乍看上去没什么问题，而且大多数情况下也能正常运行。...发出报错的 action 后， observable 便完成了，因为 redux-observable 的基础设施取消了 epic 的订阅。...在 epic 中，catch 返回的 observable 完成了，epic 也就完成了。解决方法是将 map 和 catch 的调用移到 switchMap 里面，就像这样: ?...这样 epic 便不会完成，它会继续 dispatch 报错的 actions: ? 在这两个示例中，对于被调试的代码来说，唯一需要修改就是是添加了某个标记注释。

1.2K4 0

写在 2021: 值得关注学习的前端框架和工具库

对于我认为较为主流的则不会包含（如Vue与React框架本身这种~）。...Nx Cloud[76]，Nx（详细介绍见下面）提供的云平台，主要功能是在项目达到一定规模，导致构建耗时较长时，避免每个开发人员要重新在自己本地构建一次项目，而是从云端下载已构建完成的文件，以此来提高效率...Redux-Observable[91]， Redux的RxJS中间件。 Reactive.How[92]，生动的展示RxJS Observable在操作符管道中的流动，入门期间使用有奇效。...秉承了Angular的思想，提供了一整套的集成：和Angular Router的集成：@ngrx/router-store；对于集合类型的适配：@ngrx/entity；副作用管理：@ngrx/effects...，以及必不可少的schematics：@ngrx/schematics等，最大的优势是和RxJS的深度集成。

4.2K1 0

写在2021: 值得关注学习的前端框架和工具库

对于我认为较为主流的则不会包含（如Vue与React框架本身这种~）。...Nx Cloud，Nx（详细介绍见下面）提供的云平台，主要功能是在项目达到一定规模，导致构建耗时较长时，避免每个开发人员要重新在自己本地构建一次项目，而是从云端下载已构建完成的文件，以此来提高效率。...Redux-Observable， Redux的RxJS中间件。 Reactive.How，生动的展示RxJS Observable在操作符管道中的流动，入门期间使用有奇效。...秉承了Angular的思想，提供了一整套的集成：和Angular Router的集成：@ngrx/router-store；对于集合类型的适配：@ngrx/entity；副作用管理：@ngrx/effects...，以及必不可少的schematics：@ngrx/schematics等，最大的优势是和RxJS的深度集成。

2.8K1 0

Rxjs 响应式编程-第五章使用Schedulers管理时间

groupBy返回一个Observable，它为每个创建的组发出一个Observable。...何时使用它 Default Scheduler永远不会阻塞事件循环，因此它非常适合涉及时间的操作，如异步请求。...它也可以在从未完成的Observable中使用，因为它不会在等待新通知时阻塞程序（这可能永远不会发生）。...由于返回正在Immediate Scheduler上运行，因此该过程会重复，导致无限循环并且永远不会结束。...对于我们的示例，我们在虚拟时间0开始和订阅，并且我们在1200（虚拟）毫秒处理Observable。 startScheduler方法返回一个带有scheduler和messages属性的对象。

1.3K3 0

作为JavaScript开发人员，这些必备的VS Code插件你都用过吗？

VS Code插件的种类在本文，我主要介绍专门针对JavaScript开发者的VS Code插件。有很多满足此条件的VS Code插件，当然我不会都作介绍。...Angular 6：提供Angular 6的代码片段，支持TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。...它带有很好的发布在GitBook上的文档。 Ember：为Ember提供了命令行支持和智能提示。安装完后，所有ember cli的命令可直接在VS Code自己的命令行列表中使用。...Ionic Extesion Pack：这个包里有针对Ionic、Angular、RxJS、Cordova和HTML开发的插件。...client这样的可用工具，让你在完成工作时减少了对外部工具的依赖；再比如SpreadJS纯前端表格控件，让在线Excel嵌入您的应用。

2.8K1 0

Angular vs React 最全面深入对比

虽然Angular是第一个积极采用TypeScript的主要框架，但它也可以与React一起使用。 RxJS RxJS是一个响应式编程库，可以灵活地处理异步操作和事件。...@ngrx/store @ngrx/store是由Redux启发的Angular的状态管理库，基于由pure reducer进行突变的状态。...它与RxJS的集成允许您利用推送更改检测策略获得更好的性能。...不需要学习任何新的逻辑结构或循环，因为所有这些都是纯JavaScript。官方教程是开始学习React的好地方。一旦完成了官方教程，接下来应该熟悉并掌握React的路由机制。...选择项目的一些主要功能，并尝试使用其中一个框架以简单的方式实现它们。 Demo通常不会（也不应该）花费很多时间，但会提供一些宝贵的经验，可以帮助您验证关键的技术要求。

3.8K7 0

这些必备的VSCode JavaScript插件你都用过吗？

有很多满足此条件的VS Code插件，当然我不会都作介绍。相反，我会着重介绍那些已经相当流行而且对前端开发者来说必不可少的VS Code插件。为简单起见，我把它们分为10类。...Angular 6（提供Angular 6的代码片段，支持TypeScript、HTML、Angular Material ngRx、RxJS和Flex Layout。...目前有220多万的下载量和172个Angular代码片段。） Angular v5 snippets（提供针对TypeScript、RxJS、HTML和Docker文件的代码片段。...它带有很好的发布在GitBook上的文档。） Ember（为Ember提供了命令行支持和智能提示。安装完后，所有ember cli的命令可直接在VS Code自己的命令行列表中使用。）...Quokka.js（非常厉害的调试工具，为JavaScript提供了快速构建原型的演练场，并且附带有很好的文档。） ? 2.

5.8K1 0

5 分钟温故知新 RxJS 【转换操作符】

这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。 ---- RxJS 转换操作符，继续冲冲冲！...bufferWhen：收集值，直到关闭选择器发出值才发出缓冲的值使用方法大同小异，简单理解为：车站安检，人很多的时候，就有专人在那设卡，控制流量，当设卡的人觉得在某个条件下可以了，就放卡，这里的条件可以是...此时 bufferBy 会发出值以完成缓存。将自上次缓冲以来收集的所有值传递给数组。...reduce，它能将源 observalbe 的值归并为单个值，当源 observable 完成时将这个值发出。...与 buffer 的衍生也很像。 ---- OK，以上便是本篇分享，往期关于 RxJS 的内容： 3 分钟温故知新 RxJS 创建实例操作符你就是函数响应式编程（FRP）啊？!

5901 0

Vue 开发的正确姿势：响应式编程思维

而狭义的响应式编程通常指的是 rxjs 这类 “面向数据串流和变化传播的声明式编程范式” 虽然 Vue 也是‘响应式编程’，但是和 RxJS 是完全不一样的概念，至少RxJS 是有范式约束的，不管是编码上还是思维上面...有点异曲同工之妙吧省市区选择器 再来看一个稍微复杂一点的例子，常见的省市区选择器，这是一个典型的数据联动的场景。...我们先来看一个反例吧，我们的选择器需要先选择国家或地区，然后根据它来确定行政区域的划分，接着渲染各级行政区域选择器： export default defineComponent({ props:...，实现的是国家-国家各种区域的选择器，比如选择了中国就会有中国-省-市-区这样的分级。...这就意味着组件可以自己管理和销毁自己的资源，不会泄露出去。这是组件和 Hooks 是有本质区别的！

3132 0

9 个超实用的 JavaScript 原生插件工具

非常轻量级的包(5KB)，有助于处理React应用程序中的不可变状态，我们只需要通过不干扰原始状态来更改虚拟状态，然后，一旦所有更改完成，它就会推送下一个状态。...如果你需要记录你的个人功能，那么jsdoc是一个很好的工具。生成的文件非常基础，用于文档目的，你可以在短时间内拥有自己的功能文档。...实用的JavaScript函数式。 Ramda强调更纯粹的函数风格，不变性和无副作用的函数是其设计理念的核心，帮助你用简洁优雅的代码完成工作。...为 JavaScript 应用程序量身定制的状态管理库。在开始之前你需要知道RxJS风格的observables以及基本的TypeScript语法。...如果你正在使用 Angular 应用程序，建议使用 Akita，因为与ngrx和ngxs相比，它更容易。

1.2K2 0

Rxjs 响应式编程-第二章：序列的深入研究

为了释放它们的力量，我们必须知道将我们的程序输入和输出转换为带有我们程序流程的序列。在我们弄清楚之前，我们将会遇到一些可以帮助我们开始操作序列的基本operator。...即使用户尚未完成行走，我们也需要能够使用我们目前所知的速度值进行计算。我们想要实时记录无限序列的平均值。...问题是如果序列永远不会结束，像reduce这样的聚合运算符将永远不会调用其Observers的onNext运算符。...5.订阅不会改变; 它像以前一样继续处理地震的数据流。始终有一种方法到目前为止，我们已经使用了rx.all.js中包含的RxJS运算符，但通常还是需要借鉴其他基于RxJS的库附带的运算符。...我们以声明的方式表达了我们的整个程序，而不必编码完成手头任务的每一步。

4.1K2 0

RxJS实现“搜索”功能

这个时候，只能献祭出终极解决方案：本篇主角 —— RxJS 了，其实不止有 JS 的 RxJS，与之对应的还有，RxJava、RxAndroid、RxSwift，它们都是处理异步编程的【核武器库】； RxJS...（若还不理解什么是防抖的同学，可以将它理解为 LOL 中的回程，按下 B 键，隔了几秒，才会真正回城回血，如果一直按 B ，则一直不会回城）； pluck 选择属性来发出；比如： const source...，则是提取点击的 event.target.value switchMap switchMap 要重点理解下；官方解释是：映射成 observable，完成前一个内部 observable，发出值。...没错，依然不好懂 ZZZ 不如，换个角度来解释： RxJS 中通常用【弹珠图】来表示“事件流”，比如 map api 的弹珠图如下： switch api 的弹珠图如下：当发出一个新的内部 Observable...即永远订阅最新的Observable；那么：switchMap = map + switch ，示意如下：结合理解，在本篇搜索示例中，即用 Http.get(url) 所得 data 值作为事件流的最新值

5431 0

深入浅出 RxJS 之合并数据流

在数据流前面添加一个指定数据 startWith 只获取多个数据流最后产生的那个数据 forkJoin 从高阶数据流中切换数据源 switch 和 exhaust 合并类操作符 RxJS 提供了一系列可以完成...Observable 对象不会完结，那排在后面的 Observable 对象永远没有上场的机会。...1000, 1000).map(i => `C: ${i}`); const merged$ = source1$.merge(source2$, source3$, 2); source3$ 中的数据永远不会获得进入...source1$ 是由 interval 产生的数据流，是不会完结的，但是 zip 产生的 Observable 对象却在 source2$ 吐完所有数据之后也调用了 complete ，也就是说，只要任何一个上游的...exhaust exhaust 的含义就是“耗尽”，在耗尽当前内部 Observable 的数据之前不会切换到下一个内部 Observable 对象。

1.6K1 0

Rxjs 响应式编程-第四章构建完整的Web应用程序

对于用户界面位，我们将使用RxJS-DOM库，这是由RxJS制作的同一团队的库，它提供了方便的Operator来处理DOM和浏览器相关的东西，这将使我们的编程更简洁。...到目前为止，我们的代码看起来很合理;我们有一个带有两个订阅的Observable地震：一个在地图上绘制地震，另一个在表格中列出地震。但我们可以使代码更有效率。...如果没有row，getRowFromEvent将不会尝试产生任何item。更重要的是，我们的代码现在非常高效。...合并来自世界各地的地震报告，而不仅仅是美国，并在地图中将它们全部展示在一起将会很有趣。为此，您可以使用merge和mergeAll的帮助，并使用distinct与选择器函数来避免重复。...这将涉及通过地震在服务器上对推文进行分组，并且您可能希望使用groupBy运算符将推文分组到特定地理区域。

3.6K1 0

Angular 使用 RxJS 优化处理多个Http请求

Angular自带有http模块可以方便的进行Http请求。...处理HTTP最好放到单独的Service文件中，再注入到Component。这里为了演示没有这么做。...优化有顺序依赖的多个请求有些使用我们需要发起多个请求，根据第一个请求返回的结果中的某些内容，作为第二个请求的参数，比如下面代码。...; import { Observable } from 'rxjs/Observable'; import { mergeMap } from 'rxjs/operators'; @Component...可以合并 Observable 对象处理并发请求 forkJoin 是 Rx 版本的 Promise.all()，即表示等到所有的 Observable 都完成后，才一次性返回值。

4.1K1 0

创建 Observable

在 RxJS 中为我们提供了很多创建 Observable 对象的方法，其中 create 是最基本的方法。...需要注意的是，很多人认为 RxJS 中的所有操作都是异步的，但其实这个观念是错的。RxJS 的核心特性是它的异步处理能力，但它也是可以用来处理同步的行为。...在调用 complete 方法之后，next 方法就不会再次被调用。...方法执行后，next 就会失效，所以不会输出 not work。...，比如监听 click 事件，对于这种场景，complete 方法就永远不会被调用。

1.1K1 0

RxJS 学习系列 12. 合并操作符 concatAll, mergeAll, switchAll

如果用TypeScript中的泛型来表达就像是 Observable> 通常我们需要的是第二层 Observable 送出的元素，所以我们希望可以把二维的 Observable...switchAll：新的 observable 送出后直接处理新的 observable 不管前一个 observable 是否完成，每当有新的 observable 送出就会直接把旧的 observable...退订(unsubscribe)，永远只处理最新的 observable!...注意：RxJS5 中叫switch，由于与Javascript保留字冲突，RxJS 6中对以下运算符名字做了修改：do -> tap, catch ->catchError, switch -> switchAll...不会舍去，每次都会输出 switchAll() ); example.subscribe({ next: (value) => { console.log(value

1.6K2 0

【Appetite】ionic3实录（五）基本服务实现

前面章节基本把应用的总体配置完成了，开始进入具体页面的开发，而这些离不开与数据的交互、与用户的反馈操作等。正所谓“兵马未动，粮草先行”，现在封装下基本的服务。...angular/core'; import { Headers, RequestOptions } from '@angular/http'; import 'rxjs/add/operator/map...二、网络请求服务 ionic g provider common import 'rxjs/add/operator/retry'; import 'rxjs/add/operator/timeout...'; import 'rxjs/add/operator/delay'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator/toPromise...因为数据接口服务往往不会只返回数据，还应带有请求信息，如获取数据为空，可以提示是系统问题、权限问题还是数据本就这样，所以封装了统一响应数据接口。

3.1K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭