一个基于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: []}))
      );
    })
  );