loading 從 true 變為 false:
單從這個 initiator 欄,是很難找到是哪一行應用程式碼,發起的這個 cart 載入:
根據 [Cart] Load Cart
關鍵字搜尋是能找到的:
最後找到了準確的程式碼行數,呼叫 CartConnector 去讀取資料:
首先檢視針對這個 cart,是否存在 pending 請求:
使用 withLatestFrom
運算子,檢視這個 cart 是否有 PendingProcesses
:
withLatestFrom(
this.store.pipe(
select(
getCartHasPendingProcessesSelectorFactory(payload.cartId)
)
)
)
這裡使用 withLatestFrom,從另一個 Observable 裡進行資料查詢。
下面這段程式碼組合了兩個按照不同時間間隔,分別發射遞增整數序列的 Observable:
// RxJS v6+
import { withLatestFrom, map } from 'rxjs/operators';
import { interval } from 'rxjs';
//emit every 5s
const source = interval(5000);
//emit every 1s
const secondSource = interval(1000);
const example = source.pipe(
withLatestFrom(secondSource),
map(([first, second]) => {
return `First Source (5s): ${first} Second Source (1s): ${second}`;
})
);
/*
"First Source (5s): 0 Second Source (1s): 4"
"First Source (5s): 1 Second Source (1s): 9"
"First Source (5s): 2 Second Source (1s): 14"
...
*/
const subscribe = example.subscribe(val => console.log(val));
因為 host Observable 的時間間隔為 5 秒,所以每個5秒鐘,console 皮膚新增一條輸出,且 host Observable 的遞增值為 5,但此時因為使用 withLatestFrom 運算子傳入的輸入 Observable 的時間間隔為 1 秒,因此每個 5 秒過去後,second Observable 的遞增序列為 5:
如果有,就不繼續進行下去了,透過 filter
運算子阻止進一步執行。
能進行到程式碼 60 行,說明此時沒有 pendingProcess 施加在 Cart 上。
ActiveCartServicei 依賴到 MultiCartService:
在 isStableSelector
里加上列印語句:
會頻繁觸發:
比如下面這個呼叫會觸發:
此處載入當前 user 的 cart:
為什麼會觸發下面這段程式碼?因為 Spartacus 有大量 createSelect 的呼叫:
如下圖所示:
createSelector 的輸入引數由一個 Selector 和 projector 組成。
createSelector 支援數量可變的引數,前 n - 1 個引數都被當成 selector 處理,最後一個引數為 projector:
下圖 getCartIsStableSelectorFactory
實現體的第 58 行程式碼為什麼會被呼叫?
是因為 MultiCartService 的 isStable 方法在 Cart Load 場景裡被呼叫?
確實如此:
所以每一次可能引起 isStable 返回值發生變化的時候,getCartIsStableSelectorFactory
裡的 projector 都會被呼叫,重新計算 isStable 的最新值。