App.module.ts 的原始碼：

```typescript
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));
  }

}
```

首先執行 ofType，這本質是一個 filter 操作：
![](https://img-blog.csdnimg.cn/img_convert/fbdfa409983b0271247f885a1c05a2df.png)

陣列的 some 方法：檢查陣列元素是否滿足 predicate 函式指定的條件
![](https://img-blog.csdnimg.cn/img_convert/ecd6949485d3567a67d91ea79adb955f.png)

然後執行 map 操作，返回一個 OperatorFunction，作為 pipe 的輸入條件之一：
![](https://img-blog.csdnimg.cn/img_convert/a01cd208d7cf1814caf121e0426b5631.png)

![](https://img-blog.csdnimg.cn/img_convert/0d05474e219164d8ee8c4cf6991d8555.png)

觸發點：
![](https://img-blog.csdnimg.cn/img_convert/2f4bb8a0683ff21e1d2bddbe58aadbbd.png)

![](https://img-blog.csdnimg.cn/img_convert/20d24159556039ed329c876982fe8f07.png)

quantity 的值來自 activeCartService 維護的 active cart 的 deliveryItemsQuantity 欄位。
![](https://img-blog.csdnimg.cn/img_convert/9c66061ee2df16ee1341f7089992d57d.png)

執行 Async pipe：
![](https://img-blog.csdnimg.cn/img_convert/d9c040de36e0c377042b6e668db55090.png)

async pipe 的 transform 方法會呼叫 subscribe 方法：
![](https://img-blog.csdnimg.cn/img_convert/739555f1e896bc0919d36ea30919d453.png)

createSubscription 最終會呼叫：
![](https://img-blog.csdnimg.cn/img_convert/95a5472a2d3bac54b96a673f547e9b24.png)

getActive 返回：

![](https://img-blog.csdnimg.cn/img_convert/de7b28d5fa8abf3345571d2f19f153b0.png)

![](https://img-blog.csdnimg.cn/img_convert/4ef07639e4a0a0e5a5d13a34dfc57983.png)

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

activeCartLoading$ 負責載入 cart，見程式碼第 139 行。
![](https://img-blog.csdnimg.cn/img_convert/20989c37b8e207329bf836bee36fdec0.png)

呼叫的是 ActiveCartService 的 loadCart 方法：
![](https://img-blog.csdnimg.cn/img_convert/38e985388b4aca527ab5b0c239b7cba8.png)

![](https://img-blog.csdnimg.cn/img_convert/4ba23865d164c8d8bfaa96501dcffb5f.png)

給 store 傳送一個 action。

LoadCart 擴充套件自 EntityLoadAction，除了 payload 之外，定義了額外的欄位：

![](https://img-blog.csdnimg.cn/img_convert/498a3b2c1c4a21626446140132e32ce3.png)

比如 meta：
![](https://img-blog.csdnimg.cn/img_convert/f9670f7ad1d9f0cdd825b0bd39f2bbb7.png)

如果想列印出載入成功的購物車資訊：

```typescript
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();
```

結果：

![](https://img-blog.csdnimg.cn/img_convert/2927c55254bbb225c7b14f301f0388c8.png)

那麼，這個載入成功的 Cart 資料，是如何透過 action 例項 subscribe 之後被讀取出來的呢？

顯然，單步除錯第73行程式碼，並不會看到我們想了解的明細。因為 subscribe 只是觸發 cart 的載入，而後者是一個非同步過程。

![](https://img-blog.csdnimg.cn/img_convert/caa1004e678914b035af2c1522b2a099.png)

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

![](https://img-blog.csdnimg.cn/img_convert/ad81d8963b8b32ecca6c74641a9946f4.png)

在 subscriber 的實現裡，能看到當前已經 ready 的 state 值：
![](https://img-blog.csdnimg.cn/img_convert/e13ff6d9999bf525d9f0f2bfbfdf06aa.png)

![](https://img-blog.csdnimg.cn/img_convert/d683b8f966f7cca58054e69a12238a21.png)

ngrx-store.js 在這裡將 state 片段的 carts 傳入 map 回撥函式里：

![](https://img-blog.csdnimg.cn/img_convert/5461961b6a343149a3ea576bdc6dd06d.png)

SAP Spartacus 讀取 Cart 的原理分析

相關文章