Angular Effects.ofType的工作原理

2024-05-12 20:43:38

这个ofType来自@ngrx/effects:

注意这个形参的名称：allowedTypes:

ofType里面是一个filter操作：

rxjs里的老朋友：filter操作符

一旦我在UI上输入一个字符后，通过单步调试搞清楚ofType里设置的fitler逻辑是如何工作的：

应用程序调用store.dispatch发送一个SearchAction：

store内部有个属性actionObserver,是一个BehaviorSubject：

Subject (主体): 相当于 EventEmitter，并且是将值或事件多路推送给多个 Observer 的唯一方式。

ActionsSubject->BehaviorSubject->Subject:

subject里拿到监听它的observor列表，遍历，逐一通知：

Schedulers (调度器): 用来控制并发并且是中央集权的调度员，允许我们在发生计算时进行协调，例如 setTimeout 或 requestAnimationFrame 或其他。

Scheduler flush action execution：

最终这里调用到之前通过ofType内部的filter设置的过滤器：

因为filter返回true，所以继续执行链条的下一个元素：

即debounceTime.js:

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular Effects.ofType的工作原理相关推荐

SAP Spartacus 中 Angular json pipe 的工作原理
源代码如下: <ng-template cxOutletRef="header" cxOutletPos="before" let-jerryvar> ...
Angular Injector.create的工作原理
下列这段代码: const BASE_URL = new InjectionToken<string>('只是描述');const injector =Injector.create({p ...
谈谈Angular关于$watch，$apply 以及 $digest的工作原理
这篇文章主要是面向那些刚开始学AngularJs和想要了解数据绑定(data-binding)是怎么工作的, 如果你已经熟悉如何使用angularjs了,我强烈建议你不用阅读了. angularjs使 ...
RxJs map operator 工作原理分析
使用一个例子来研究 map 操作符的工作原理. 推荐阅读本文之前,先浏览这篇文章RxJs fromEvent 工作原理分析以了解相关知识. 源代码: import { Component, OnIni ...
SAP Fiori Elements 框架里 Smart Table 控件的工作原理介绍
这是 Jerry 2021 年的第 34 篇文章,也是汪子熙公众号总共第 310 篇原创文章. Jerry 前一篇文章深入掌握 SAP Fiori Elements 工作原理系列之二:如何给 Fio ...
深入理解 SAP Fiori Elements 工作原理系列之二：如何给 SAP Fiori Elements 应用添加自定义按钮
这是 Jerry 2021 年的第 33 篇文章,也是汪子熙公众号总共第 309 篇原创文章. Jerry 的日常工作内容从 2020 年 8 月转到 Angular 前端开发之后,算是领略到了这个流 ...
SAP Spartacus自定义指令cxOutlet的工作原理
cxOutlet合集 SAP Spartacus自定义指令cxOutlet的工作原理 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件 SAP Sparta ...
javascript---001-运行原理01_前端三大技术_JS重要性_Atwood定律_JS应用_JS让人迷惑_TypeScript会取代JS吗_JS是一门编程语言_浏览器工作原理_浏览器内核
javascript-001-运行原理01 1.前端三大技术 HTML CSS Javascript 2.Javascript的重要性 (1)javascript是很多框架的基础,Vue,React, ...
Android系统Recovery工作原理之使用update.zip升级过程分析（一）
这篇及以后的篇幅将通过分析update.zip包在具体Android系统升级的过程,来理解Android系统中Recovery模式服务的工作原理.我们先从update.zip包的制作开始,然后是And ...

最新文章

热门文章