一個基于ngrx的Angular圖書搜尋應用，帶網絡請求

Jerry之前的文章 一個基于ngrx的計數器例子

介紹的是一個單機版的Angular應用，本文來看看一個加上了網絡傳輸的例子。

(1) 定義action：

(2) reducer裡，如果目前收到的action類型為搜尋已完成，則傳回的state對象裡包含搜尋結果：

注意，這裡并沒有根據SEARCH這個action做處理，換言之，search動作并不是在reducer裡顯式觸發的，這也符合ngrx的設計原則——search動作一定是通過store.dispatch對應的action觸發的。

在book manage Component構造函數裡，初始化store：

searchResult$的類型：

book manage HTML由book search和book list組成：

第二行的(searchEventEmitter), 意思是app-search-input這個控件裡有一個類型為EventEmitter的@Output屬性，通過其内部實作将BookName這個字段以事件通知的方式發送給目前的book manage Component，被後者的searchEventHandler所接收。

在searchEventHandler裡，使用store.dispatch觸發搜尋動作。

而第5行用方括号包裹的bookList，意思是把Book manage的屬性searchResult$賦給app-book-list裡使用了@Input修飾的bookList：

this.store.dispatch(new bookManageAction.searchAction)會自動觸發對應的effect，調用Google API完成圖書搜尋工作：

@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: []}))
      );
    })
  );