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: []}))
);
})
);
要获取更多Jerry的原创文章，请关注公众号"汪子熙":