Angular Effects.ofType的工作原理

简介: Angular Effects.ofType的工作原理

这个ofType来自@ngrx/effects:image.pngimage.png注意这个形参的名称:allowedTypes:image.pngofType里面是一个filter操作:image.pngrxjs里的老朋友:filter操作符image.pngimage.png一旦我在UI上输入一个字符后,通过单步调试搞清楚ofType里设置的fitler逻辑是如何工作的:image.png

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

image.png

store内部有个属性actionObserver,是一个BehaviorSubject:image.pngSubject (主体): 相当于 EventEmitter,并且是将值或事件多路推送给多个 Observer 的唯一方式。image.pngActionsSubject->BehaviorSubject->Subject:

subject里拿到监听它的observor列表,遍历,逐一通知:image.pngimage.pngimage.pngSchedulers (调度器): 用来控制并发并且是中央集权的调度员,允许我们在发生计算时进行协调,例如 setTimeout 或 requestAnimationFrame 或其他。

Scheduler flush action execution:image.pngimage.png最终这里调用到之前通过ofType内部的filter设置的过滤器:image.pngimage.pngimage.png

因为filter返回true,所以继续执行链条的下一个元素:image.png即debounceTime.js:image.png

相关文章
|
21天前
|
JavaScript 前端开发 编译器
Angular 中的结构指令运行时的工作原理
Angular 中的结构指令运行时的工作原理
23 4
|
21天前
|
JavaScript 前端开发 API
vue的双向绑定的原理,和angular的对比
vue的双向绑定的原理,和angular的对比
66 0
|
7月前
|
JSON 搜索推荐 数据格式
Angular SSR 应用中 serverApp-state script 的工作原理介绍
Angular SSR 应用中 serverApp-state script 的工作原理介绍
34 0
|
9月前
|
JavaScript
Angular @Inject 注解的实际应用例子和工作原理浅析
Angular @Inject 注解的实际应用例子和工作原理浅析
54 0
|
9月前
|
JavaScript 前端开发
Angular @Injectable 注解的工作原理浅析
Angular @Injectable 注解的工作原理浅析
50 0
|
9月前
|
JavaScript 前端开发 容器
从编译后的代码,分析 Angular @Injectable 的工作原理
从编译后的代码,分析 Angular @Injectable 的工作原理
50 0
|
JavaScript 前端开发 容器
从编译后的代码,分析 Angular @Injectable 的工作原理
从编译后的代码,分析 Angular @Injectable 的工作原理
83 0
|
JavaScript
Angular @Inject 注解的实际应用例子和工作原理浅析
Angular @Inject 注解的实际应用例子和工作原理浅析
87 0
|
JavaScript 前端开发
Angular @Injectable 注解的工作原理浅析
Angular @Injectable 注解的工作原理浅析
217 0
Angular @Injectable 注解的工作原理浅析
|
JavaScript 前端开发
SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍
这是Jerry 2021年的第 11 篇文章,也是汪子熙公众号总共第 282 篇原创文章。
SAP UI5和Angular的函数防抖(Debounce)和函数节流(Throttle)实现原理介绍