App.module.ts 的源代碼:

首先執行 ofType,這本質是一個 filter 操作:
數組的 some 方法:檢查數組元素是否滿足 predicate 函數指定的條件
然後執行 map 操作,傳回一個 OperatorFunction,作為 pipe 的輸入條件之一:
觸發點:
quantity 的值來自 activeCartService 維護的 active cart 的 deliveryItemsQuantity 字段。
執行 Async pipe:
async pipe 的 transform 方法會調用 subscribe 方法:
createSubscription 最終會調用:
getActive 傳回:
activeCart$ 的值來自 activeCartLoading$ 和 activeCartValue$ 兩部分。
activeCartLoading$ 負責加載 cart,見代碼第 139 行。
調用的是 ActiveCartService 的 loadCart 方法:
給 store 發送一個 action。
LoadCart 擴充自 EntityLoadAction,除了 payload 之外,定義了額外的字段:
比如 meta:
如果想列印出加載成功的購物車資訊:
結果:
那麼,這個加載成功的 Cart 資料,是如何通過 action 執行個體 subscribe 之後被讀取出來的呢?
顯然,單步調試第73行代碼,并不會看到我們想了解的明細。因為 subscribe 隻是觸發 cart 的加載,而後者是一個異步過程。
F8之後斷點再次觸發時,cart 資料已經出現在 payload 裡了。但是我們不知道是誰從哪裡通過什麼樣的方式進行的回調。
在 subscriber 的實作裡,能看到目前已經 ready 的 state 值
ngrx-store.js 在這裡将 state 片段的 carts 傳入 map 回調函數裡: