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

相关文章
|
14天前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
28 0
|
4月前
|
JavaScript 前端开发 编译器
Angular 中的结构指令运行时的工作原理
Angular 中的结构指令运行时的工作原理
|
4月前
|
JavaScript 前端开发 API
vue的双向绑定的原理,和angular的对比
vue的双向绑定的原理,和angular的对比
88 0
|
10月前
|
JSON 搜索推荐 数据格式
Angular SSR 应用中 serverApp-state script 的工作原理介绍
Angular SSR 应用中 serverApp-state script 的工作原理介绍
|
12月前
|
JavaScript
Angular @Inject 注解的实际应用例子和工作原理浅析
Angular @Inject 注解的实际应用例子和工作原理浅析
|
12月前
|
JavaScript 前端开发
Angular @Injectable 注解的工作原理浅析
Angular @Injectable 注解的工作原理浅析
|
12月前
|
JavaScript 前端开发 容器
从编译后的代码,分析 Angular @Injectable 的工作原理
从编译后的代码,分析 Angular @Injectable 的工作原理
|
JavaScript 前端开发
Angular @Injectable 注解的工作原理浅析
Angular @Injectable 注解的工作原理浅析
239 0
Angular @Injectable 注解的工作原理浅析
|
JavaScript 前端开发 容器
从编译后的代码,分析 Angular @Injectable 的工作原理
从编译后的代码,分析 Angular @Injectable 的工作原理
92 0
|
JavaScript
Angular @Inject 注解的实际应用例子和工作原理浅析
Angular @Inject 注解的实际应用例子和工作原理浅析
99 0