一个基于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 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图书搜索应用，带网络请求相关推荐

学习C++项目——一个基于C++11简单易用的轻量级网络编程框架 1
一个基于C++11简单易用的轻量级网络编程框架一.项目下载.导入.编译和运行现在准备深入学习 C++ ,先肝一个项目,这个项目是<一个基于C++11简单易用的轻量级网络编程框架>, ...
一款基于RxJava2+Retrofit2实现简单易用的网络请求框架
本库是一款基于RxJava2+Retrofit2实现简单易用的网络请求框架,结合android平台特性的网络封装库,采用api链式调用一点到底,集成cookie管理,多种缓存模式,极简https配置, ...
利用Flutter写一个跨平台的果核APP（3）——网络请求
前言紧接上文界面篇,上文中在构建布局的时候因为是直接将文字图片显示出来的,所以消息类Message,和日知录类One都是采用的无状态的StatelessWidget类,这次我们需要调用接口,然后将返 ...
一个基于ngrx的计数器例子
(1) 定义action 从@ngrx/store导入Action,新建一个Action的子类: (2) 实现reducer,根据不同的action type,返回不同的store store要存储的 ...
一个基于ngrx的计数器例子单步调试搞清楚原理
这个计数器的例子参考我之前的文章. 计数器值的增加:通过store.dispatch: 进入ngrx的store.js: schedule message: delay = 0 -> 立即flu ...
推荐一个基于SpringBoot的ERP系统，自带进销存+财务+生产功能，拿来即用（附项目地址）
今天推荐的这个项目是因为使用手册部署手册非常完善,项目也有开发教程视频对小白非常贴心,接私活可以直接拿去二开非常舒服. 该ERP系统基于SpringBoot框架和SaaS模式,立志为中小企业提供开源好 ...
Android支持单词提示搜索框的网络请求策略
项目里有这么一个需求,如果用户进入一个搜索页面,页面顶端有一个搜索框,用户在输入的同时,底下同步的展示相关搜索建议.大约是这个样子: 大体逻辑如下: 实现功能:在输入的同时根据输入的文字立即给出结果, ...
基于java后台微信图书商城小程序系统开题报告
本科生毕业论文基于JAVA后台微信小程序图书商城系统开题报告学院: 专业: 年级: 学生姓名: 指导教师: XXXX大学本科生毕业论文(设计)开题报告书姓 ...
基于 Electron 和 Angular 的抽奖软件 MyLottery
MyLottery 详细介绍 MyLottery是一个基于Electron 和 angular做的抽奖软件,可以编译运行到各种桌面系统. 具有以下特性动画效果炫酷可以选择xlsx格式数据初始化成员 ...

一个基于ngrx的Angular图书搜索应用，带网络请求

一个基于ngrx的Angular图书搜索应用，带网络请求相关推荐

最新文章

热门文章