SAP 電商雲 Spartacus UI ActiveCartService isStable 呼叫何時返回 true

注销發表於2022-04-19

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 的最新值。

相關文章