為了給使用者更好的反饋，基於他們的行為，我們經常需要保留諸如“正在載入購物車”、“獲取使用者地址失敗”等資訊。 對於每個單獨的應用程式狀態，我們必須將後設資料放在旁邊。 分別用於購物車、使用者資訊、產品資料等。 在所有這些地方手動實現這個邏輯會導致在整個程式碼庫中針對同一問題有不同的解決方案。 這就是在 spartacus 中建立 loaderReducer 的原因。 這個reducer 標準化了整個狀態樹(state tree)中的後設資料處理。 您可以在樹的任何深度、任何需要的地方使用它。 除了reducer，我們還提供 actions 和 selectors 的實用程式。

一個例子：

在 app.module.ts 裡插入如下程式碼：

```typescript
export class AppModule { 
  constructor(private config: DebugConfig,
    private actions$: Actions){
    // 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();
  }

}
```

執行時效果：
![](https://img-blog.csdnimg.cn/img_convert/946165ac4de20bad627b0626f3bc844f.png)

Error 是經常放置在 NgRx Store 中的 AJAX 呼叫狀態之一。 其他狀態包括 Loading，Loaded 和 Success 等等。

```typescript
interface ResultState {
  result: Result,
  error: string|null,
  isLoading: boolean,
  isLoaded: boolean,
}
```

為什麼將這些狀態放入 Store？ 嗯，這通常是由使用者體驗決策驅動的。例如，使用者應該能夠在等待呼叫完成時看到某種進度指示器，或者如果呼叫結果出錯時，能看到錯誤訊息。

SAP Spartacus 採用了統一的工具 reducer，名為 loaderReducer，來為 entity 載入新增不同的標誌位：

> Higher order reducer that adds generic loading flag to chunk of the state. It utilizes "loader" meta field of actions to set specific flags for specific action (LOAD, SUCCESS, FAIL, RESET)

將通用載入標誌新增到狀態塊的高階 reducer. 它利用“載入程式”元操作欄位來設定特定操作的特定標誌（載入、成功、失敗、重置）
![](https://img-blog.csdnimg.cn/img_convert/6dbc8c0642ddab8251f1c6db13ccbb12.png)

一旦某個 entity 載入成功之後，首先觸發高階 reducer：

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

注意這行語句：
```javascript
return Object.assign(Object.assign({}, state), { value: reducer ? reducer(state.value, action) : action.payload, loading: false, error: false, success: true });
```

顯式將 state 裡的 loading 欄位硬編碼為 false.這樣無需應用程式手動修改 loading 標誌位了。

關於 SAP Spartacus Loader Meta Reducer 的用途

相關文章