Angular @Effect監聽指定Action類型的實作原理

Ngrx裡action的職責就是express unique events & intents.

源代碼：

@Effect()
  searchBookICanbeAnyName$: Observable<Action> = this.actions$.pipe(
    ofType(bookManage.SEARCH), // 監聽bookManager.SEARCH action?
    debounceTime(300),
    mergeMap((action: bookManage.SearchAction) => {
      const nextSearch$ = this.actions$.pipe(ofType(bookManage.SEARCH), skip(1));
      return this.service.searchBooks(action.payload).pipe(
        takeUntil(nextSearch$),
        // If successful, dispatch success action with result
        map((data: BookResult) => ({type: bookManage.SEARCH_COMPLETE, payload: data.items})),
        // If request fails, dispatch failed action
        catchError(() => of({type: bookManage.SEARCH_COMPLETE, payload: []}))
      );
    })
  );      

this.action$是Effect類構造函數參數，被

Angular

 DI架構注入：

effects.js.createEffectInstances:

action$.pipe裡傳入的三個操作：

(1) ofType - 通過filter operator實作

(2) debounceTime

(3) mergeMap

這三個operations的運作時結構：