ngRx 官方示例分析 - 1. 介绍
ngRx 的官方示例演示了在具体的场景中,如何使用 ngRx 管理应用的状态。
示例介绍
示例允许用户通过查询 google 的 book API 来查询图书,并保存自己的精选书籍列表。

菜单有两个菜单项,分别是我的精选和图书浏览。

进入图书浏览页面后,可以输入搜索的书名。应用将在线搜索匹配的图书。

点击图书之后,可以得到图书的详细信息。如果图书还没有被收藏,则提示添加到收藏中。

如果已经添加到收藏中,则变成从收藏中移除。

在我的收藏中,可以看到当前收藏的图书列表。

示例快速上手
# clone the repo
git clone https://github.com/ngrx/example-app.git # change directory to repo
cd example-app # Use npm or yarn to install the dependencies:
npm install # OR
yarn # start the server
ng serve
Navigate to http://localhost:4200/ in your browser
下一篇:ngRx 官方示例分析 - 2. Action 管理
参考资源:
ngRx 官方示例分析 - 1. 介绍的更多相关文章
- ngRx 官方示例分析 - 3. reducers
上一篇:ngRx 官方示例分析 - 2. Action 管理 这里我们讨论 reducer. 如果你注意的话,会看到在不同的 Action 定义文件中,导出的 Action 类型名称都是 Action ...
- ngRx 官方示例分析 - 2. Action 管理
我们从 Action 名称开始. 解决 Action 名称冲突问题 在 ngRx 中,不同的 Action 需要一个 Action Type 进行区分,一般来说,这个 Action Type 是一个字 ...
- ngRx 官方示例分析 - 6 - Effect
@ngrx/effect 前面我们提到,在 Book 的 reducer 中,并没有 Search 这个 Action 的处理,由于它需要发出一个异步的请求,等到请求返回前端,我们需要根据返回的结果来 ...
- ngRx 官方示例分析 - 4.pages
Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...
- ngRx 官方示例分析 - 5. components
组件通过标准的 Input 和 Output 进行操作,并不直接访问 store. /app/components/book-authors.ts import { Component, Input ...
- RocketMQ源码分析之从官方示例窥探:RocketMQ事务消息实现基本思想
摘要: RocketMQ源码分析之从官方示例窥探RocketMQ事务消息实现基本思想. 在阅读本文前,若您对RocketMQ技术感兴趣,请加入RocketMQ技术交流群 RocketMQ4.3.0版本 ...
- Halcon斑点分析官方示例讲解
官方示例中有许多很好的例子可以帮助大家理解和学习Halcon,下面举几个经典的斑点分析例子讲解一下 Crystals 图中显示了在高层大气中采集到的晶体样本的图像.任务是分析对象以确定特定形状的频率. ...
- DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版------------- ...
- DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版原创发布-带官方示例程序版
关于 DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...
随机推荐
- 阿里云ECS连接阿里云Redis问题
描述 项目之前的服务器使用Windows,Redis使用阿里云的云数据库Redis版,一切正常. 后来了更换了Linux,也配置好了Redis,但连接阿里云的Redis时却怎么也连接不上 原因 ECS ...
- swift 密码由6-16数字和字母组合组成
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #ffffff; background-color: #282b3 ...
- .Net 如何模拟会话级别的信号量,对http接口调用频率进行限制(有demo)
现在,因为种种因素,你必须对一个请求或者方法进行频率上的访问限制. 比如, 你对外提供了一个API接口,注册用户每秒钟最多可以调用100次,非注册用户每秒钟最多可以调用10次. 比如, 有一个非常吃服 ...
- iOS 关于退出键盘两种方法和避免遮挡
退出键盘: 方法1:不使用代理,直接使用: -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { [self.textFi ...
- 【费用流】BZOJ1061: [Noi2008]志愿者招募(这题超好)
1061: [Noi2008]志愿者招募 Time Limit: 20 Sec Memory Limit: 162 MBSubmit: 5291 Solved: 3173[Submit][Stat ...
- css loading
css /*loading*/ .loader { width: 100px; height: 101px; border: 8px solid; border-top-color: hsl(154, ...
- [wiki]CDN
内容分发网 内容分发网络(Content delivery network或Content distribution network,缩写:CDN)是指一种通过互联网互相连接的电脑网络系统,利用最靠近 ...
- [转]Python 资源大全中文版
摘自:https://github.com/jobbole/awesome-python-cn 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列的资源整理.awesom ...
- ZOJ3602:Count the Trees
我是在neuqvj上交的这题:http://vj.acmclub.cn/problem/viewProblem.action?id=17848 本来是挺容易的树同构题,可是节点数比较多,愣是把普通ha ...
- bzoj:1723: [Usaco2009 Feb]The Leprechaun 寻宝
Description 你难以想象贝茜看到一只妖精在牧场出现时是多么的惊讶.她不是傻瓜,立即猛扑过去,用她那灵活的牛蹄抓住了那只妖精. “你可以许一个愿望,傻大个儿!”妖精说. “财富 ...