天天看點

SAP Spartacus 讀取 Cart 的原理分析

App.module.ts 的源代碼:

SAP Spartacus 讀取 Cart 的原理分析

首先執行 ofType,這本質是一個 filter 操作:

SAP Spartacus 讀取 Cart 的原理分析

數組的 some 方法:檢查數組元素是否滿足 predicate 函數指定的條件

SAP Spartacus 讀取 Cart 的原理分析

然後執行 map 操作,傳回一個 OperatorFunction,作為 pipe 的輸入條件之一:

SAP Spartacus 讀取 Cart 的原理分析
SAP Spartacus 讀取 Cart 的原理分析

觸發點:

SAP Spartacus 讀取 Cart 的原理分析
SAP Spartacus 讀取 Cart 的原理分析
SAP Spartacus 讀取 Cart 的原理分析

quantity 的值來自 activeCartService 維護的 active cart 的 deliveryItemsQuantity 字段。

SAP Spartacus 讀取 Cart 的原理分析

執行 Async pipe:

SAP Spartacus 讀取 Cart 的原理分析

async pipe 的 transform 方法會調用 subscribe 方法:

SAP Spartacus 讀取 Cart 的原理分析

createSubscription 最終會調用:

SAP Spartacus 讀取 Cart 的原理分析

getActive 傳回:

SAP Spartacus 讀取 Cart 的原理分析
SAP Spartacus 讀取 Cart 的原理分析

activeCart$ 的值來自 activeCartLoading$ 和 activeCartValue$ 兩部分。

activeCartLoading$ 負責加載 cart,見代碼第 139 行。

SAP Spartacus 讀取 Cart 的原理分析

調用的是 ActiveCartService 的 loadCart 方法:

SAP Spartacus 讀取 Cart 的原理分析
SAP Spartacus 讀取 Cart 的原理分析

給 store 發送一個 action。

LoadCart 擴充自 EntityLoadAction,除了 payload 之外,定義了額外的字段:

SAP Spartacus 讀取 Cart 的原理分析

比如 meta:

SAP Spartacus 讀取 Cart 的原理分析

如果想列印出加載成功的購物車資訊:

SAP Spartacus 讀取 Cart 的原理分析

結果:

SAP Spartacus 讀取 Cart 的原理分析

那麼,這個加載成功的 Cart 資料,是如何通過 action 執行個體 subscribe 之後被讀取出來的呢?

顯然,單步調試第73行代碼,并不會看到我們想了解的明細。因為 subscribe 隻是觸發 cart 的加載,而後者是一個異步過程。

SAP Spartacus 讀取 Cart 的原理分析

F8之後斷點再次觸發時,cart 資料已經出現在 payload 裡了。但是我們不知道是誰從哪裡通過什麼樣的方式進行的回調。

SAP Spartacus 讀取 Cart 的原理分析

在 subscriber 的實作裡,能看到目前已經 ready 的 state 值

SAP Spartacus 讀取 Cart 的原理分析
SAP Spartacus 讀取 Cart 的原理分析

ngrx-store.js 在這裡将 state 片段的 carts 傳入 map 回調函數裡:

SAP Spartacus 讀取 Cart 的原理分析

繼續閱讀