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 resultmap((data: BookResult) => ({type: bookManage.SEARCH_COMPLETE, payload: data.items})),// If request fails, dispatch failed actioncatchError(() => of({type: bookManage.SEARCH_COMPLETE, payload: []})));}));

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的一个基于ngrx的Angular图书搜索应用，带网络请求的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。