App.module.ts 的源代碼：

export class AppModule { constructor(private config: DebugConfig,private actions$: Actions,private cartService: ActiveCartService){// console.log('Jerry config: ', this.config);this.actions$.pipe(ofType(CartActions.LOAD_CART),map((action: CartActions.LoadCart) => action.payload),tap((data) => console.log('Jerry cart: ' , data))).subscribe();this.cartService.getLoading().subscribe((data) => console.log('Jerry cart loading? ', data));}}

首先執(zhí)行 ofType，這本質(zhì)是一個(gè) filter 操作：

數(shù)組的 some 方法：檢查數(shù)組元素是否滿足 predicate 函數(shù)指定的條件

然后執(zhí)行 map 操作，返回一個(gè) OperatorFunction，作為 pipe 的輸入條件之一：

觸發(fā)點(diǎn)：

quantity 的值來自 activeCartService 維護(hù)的 active cart 的 deliveryItemsQuantity 字段。

執(zhí)行 Async pipe：

async pipe 的 transform 方法會調(diào)用 subscribe 方法：

createSubscription 最終會調(diào)用：

getActive 返回：

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

activeCartLoading$ 負(fù)責(zé)加載 cart，見代碼第 139 行。

調(diào)用的是 ActiveCartService 的 loadCart 方法：

給 store 發(fā)送一個(gè) action。

LoadCart 擴(kuò)展自 EntityLoadAction，除了 payload 之外，定義了額外的字段：

比如 meta：

如果想打印出加載成功的購物車信息：

const action2 = this.actions$.pipe(ofType(CartActions.LOAD_CART_SUCCESS),map((action: CartActions.LoadCartSuccess) => action.payload),tap((data) => console.log('Jerry cart SUCCESS: ' , data)));action2.subscribe();const action3 = this.actions$.pipe(ofType(CartActions.LOAD_CARTS_SUCCESS),map((action: CartActions.LoadCartsSuccess) => action.payload),tap((data) => console.log('Jerry carts SUCCESS: ' , data)));action3.subscribe();

結(jié)果：

那么，這個(gè)加載成功的 Cart 數(shù)據(jù)，是如何通過 action 實(shí)例 subscribe 之后被讀取出來的呢？

顯然，單步調(diào)試第73行代碼，并不會看到我們想了解的明細(xì)。因?yàn)?subscribe 只是觸發(fā) cart 的加載，而后者是一個(gè)異步過程。

F8之后斷點(diǎn)再次觸發(fā)時(shí)，cart 數(shù)據(jù)已經(jīng)出現(xiàn)在 payload 里了。但是我們不知道是誰從哪里通過什么樣的方式進(jìn)行的回調(diào)。

在 subscriber 的實(shí)現(xiàn)里，能看到當(dāng)前已經(jīng) ready 的 state 值：

ngrx-store.js 在這里將 state 片段的 carts 傳入 map 回調(diào)函數(shù)里：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus 读取 Cart 的原理分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。