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/store in GitHub

ngrx/example-app in GitHub

ngRx 官方示例分析 - 1. 介绍的更多相关文章

  1. ngRx 官方示例分析 - 3. reducers

    上一篇:ngRx 官方示例分析 - 2. Action 管理 这里我们讨论 reducer. 如果你注意的话,会看到在不同的 Action 定义文件中,导出的 Action 类型名称都是 Action ...

  2. ngRx 官方示例分析 - 2. Action 管理

    我们从 Action 名称开始. 解决 Action 名称冲突问题 在 ngRx 中,不同的 Action 需要一个 Action Type 进行区分,一般来说,这个 Action Type 是一个字 ...

  3. ngRx 官方示例分析 - 6 - Effect

    @ngrx/effect 前面我们提到,在 Book 的 reducer 中,并没有 Search 这个 Action 的处理,由于它需要发出一个异步的请求,等到请求返回前端,我们需要根据返回的结果来 ...

  4. ngRx 官方示例分析 - 4.pages

    Page 中通过构造函数注入 Store,基于 Store 进行数据操作. 注意 Component 使用了 changeDetection: ChangeDetectionStrategy.OnPu ...

  5. ngRx 官方示例分析 - 5. components

    组件通过标准的 Input 和 Output 进行操作,并不直接访问 store. /app/components/book-authors.ts import { Component, Input ...

  6. RocketMQ源码分析之从官方示例窥探:RocketMQ事务消息实现基本思想

    摘要: RocketMQ源码分析之从官方示例窥探RocketMQ事务消息实现基本思想. 在阅读本文前,若您对RocketMQ技术感兴趣,请加入RocketMQ技术交流群 RocketMQ4.3.0版本 ...

  7. Halcon斑点分析官方示例讲解

    官方示例中有许多很好的例子可以帮助大家理解和学习Halcon,下面举几个经典的斑点分析例子讲解一下 Crystals 图中显示了在高层大气中采集到的晶体样本的图像.任务是分析对象以确定特定形状的频率. ...

  8. DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.7.0.10_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版------------- ...

  9. DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版原创发布-带官方示例程序版

    关于 DotNetBar for Windows Forms 12.5.0.2_冰河之刃重打包版 --------------------11.8.0.8_冰河之刃重打包版-------------- ...

随机推荐

  1. Gulp-静态网页模块化

    前言: 在做纯静态页面开发的过程中,难免会遇到一些的尴尬问题.比如:整套代码有50个页面,其中有40个页面顶部和底部模块相同.那么同样的两段代码我们复制了40遍(最难受的方法).然后,这个问题就这样解 ...

  2. 微信小程序语音识别开发过程记录 微信小程序silk转mp3 silk转wav 以及ffmpeg使用

    说说最近在开发微信小程序语音识别遇到的问题吧 最先使用微信小程序录音控件可以拿到silk格式,后来微信官方又支持mp3格式了 但是我们拿到这些格式以后,都还不能直接使用,做语音识别,因为目前百度的语音 ...

  3. 砸黑板! 正则表达式!!!re 模块

    模块是什么? 一个模块就是一个包含了 python 定义和声明的文件,文件名就是模块名字加上.py 的后缀. 但其实 import 加载的模块分为四个通用类别: 1:使用 python 编写的代码(. ...

  4. C#窗口传值(CSDN实例)

    //非模式窗体  相较独立From qform=new Form();       qform.Show(); //模式窗体  子依赖父Form qform=new Form();qform.Show ...

  5. STM32f103x IAP远程升级小结

    最近在面试的时候遇到一个关于IAP远程程序升级的问题,由于之前所做的项目没有涉及到远程升级需求,当时一脸懵呆,不过回答的还是不错的,今天针对STM32F103系列调试了IAP的程序,这里做一下小结,如 ...

  6. PE解析器的编写(四)——数据目录表的解析

    在PE结构中最重要的就是区块表和数据目录表,上节已经说明了如何解析区块表,下面就是数据目录表,在数据目录表中一般只关心导入表,导出表和资源这几个部分,但是资源实在是太复杂了,而且在一般的病毒木马中也不 ...

  7. STM32/GD32芯片信息

    因为需要自动适配芯片进行系统配置,所以我们有必要通过读取一些系统寄存器来获取必要信息.我们的代码需要兼容STM32F1/GD32F1/STM32F0/STM32F4 代码如下: #ifdef STM3 ...

  8. mysql数据库快速入门(1)

    1.数据库操作 1.1.连接mysql服务器 mysql -u root( 用户名 ) -p 1.2.退出mysql命令提示窗 exit 1.3.查看版本 SELECT VERSION(); 1.4. ...

  9. Zabbix实战-简易教程(7)--监控第一台host

    一.安装 agent 1.1 Agent分布 1.2 Agent安装 基础模板安装方法: wget -qO- http://zbxinstall.168.com:18888/base/agent-in ...

  10. 常用原生JS函数和语法集合

    luoyishan-2017-10-08 1. 输出语句:document.write(""); 2. JS中的注释为// 3. 传统的HTML文档顺序是:document-> ...