Jerry之前的文章一個基于ngrx的計數(shù)器例子介紹的是一個單機版的Angular應(yīng)用，本文來看看一個加上了網(wǎng)絡(luò)傳輸?shù)睦印?/p>

(1) 定義action：

(2) reducer里，如果當(dāng)前收到的action類型為搜索已完成，則返回的state對象里包含搜索結(jié)果：

注意，這里并沒有根據(jù)SEARCH這個action做處理，換言之，search動作并不是在reducer里顯式觸發(fā)的，這也符合ngrx的設(shè)計原則——search動作一定是通過store.dispatch對應(yīng)的action觸發(fā)的。

在book manage Component構(gòu)造函數(shù)里，初始化store：

searchResult$的類型：

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

第二行的(searchEventEmitter), 意思是app-search-input這個控件里有一個類型為EventEmitter的@Output屬性，通過其內(nèi)部實現(xiàn)將BookName這個字段以事件通知的方式發(fā)送給當(dāng)前的book manage Component，被后者的searchEventHandler所接收。

在searchEventHandler里，使用store.dispatch觸發(fā)搜索動作。

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

this.store.dispatch(new bookManageAction.searchAction)會自動觸發(fā)對應(yīng)的effect，調(diào)用Google API完成圖書搜索工作：

@Effect()searchBookICanbeAnyName$: Observable<Action> = this.actions$.pipe(ofType(bookManage.SEARCH), // 監(jiān)聽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的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。