天天看點

Angular Effects.ofType的工作原理

這個ofType來自@ngrx/effects:

Angular Effects.ofType的工作原理
Angular Effects.ofType的工作原理

注意這個形參的名稱:allowedTypes:

Angular Effects.ofType的工作原理

ofType裡面是一個filter操作:

Angular Effects.ofType的工作原理

rxjs裡的老朋友:filter操作符

Angular Effects.ofType的工作原理
Angular Effects.ofType的工作原理

一旦我在UI上輸入一個字元後,通過單步調試搞清楚ofType裡設定的fitler邏輯是如何工作的:

Angular Effects.ofType的工作原理

應用程式調用store.dispatch發送一個SearchAction:

Angular Effects.ofType的工作原理

store内部有個屬性actionObserver,是一個BehaviorSubject:

Angular Effects.ofType的工作原理

Subject (主體): 相當于 EventEmitter,并且是将值或事件多路推送給多個 Observer 的唯一方式。

Angular Effects.ofType的工作原理

ActionsSubject->BehaviorSubject->Subject:

subject裡拿到監聽它的observor清單,周遊,逐一通知:

Angular Effects.ofType的工作原理
Angular Effects.ofType的工作原理
Angular Effects.ofType的工作原理

Schedulers (排程器): 用來控制并發并且是中央集權的排程員,允許我們在發生計算時進行協調,例如 setTimeout 或 requestAnimationFrame 或其他。

Scheduler flush action execution:

Angular Effects.ofType的工作原理
Angular Effects.ofType的工作原理

最終這裡調用到之前通過ofType内部的filter設定的過濾器:

Angular Effects.ofType的工作原理
Angular Effects.ofType的工作原理
Angular Effects.ofType的工作原理

因為filter傳回true,是以繼續執行鍊條的下一個元素:

Angular Effects.ofType的工作原理

即debounceTime.js:

Angular Effects.ofType的工作原理

繼續閱讀