ngrx/store effects 使用总结1:计数器
本教程案例github:https://github.com/axel10/ngrx_demo-counter-and-list
angular2+ 的学习成本应该是三大框架中最高的一个,教程及案例稀缺,流程较为复杂,这里我用计数器和在线获取用户数据并渲染成列表这两个案例来帮大家快速入手angular2+。
在开始之前,希望你能先掌握rxjs以及typescript,否则对其中的一些写法可能会觉得难以理解。
rxjs英文向导:http://reactivex.io/rxjs/manual/overview.html
rxjs中文向导:http://cn.rx.js.org/manual/overview.html
typescipt w3cschool教程:https://www.w3cschool.cn/typescript/
在开始之前,需要先安装@ngrx/store和@ngrx/effects
yarn add @ngrx/store @ngrx/effects
本教程使用的 ngrx/effects和ngrx/store版本均为5.2.0。
先来大致说一下开发流程:
开始 -> 编写数据模型 -> 编写action -> 编写redurces并配置到相应module -> 编写services -> 编写effects并配置到相应module -> 创建组件 -> 组件绑定数据模型 -> 渲染
我们先完成计数器案例。此案例由于没有异步任务,所以可以省略掉services和effects。
从创建项目到启动初始页面之间的步骤这里就不讲了。注意style要使用scss。还有不要使用cnpm安装包。改用yarn或者npm,这样后期使用不容易报错。
ng new your-project --style scss
第一步:编写数据模型(app/models/num.ts)
export class Num { count: number; constructor(num: number) { this.count = num; } }
第二步:编写action(app/actions/num.ts)
import {Action} from '@ngrx/store'; export enum NumActionType { Add = 'ADD' } export class ADD implements Action { readonly type = NumActionType.Add; //固定写法,必须叫type }
第三步:编写redurcers(app/redurces/modelNum.ts)
import {Num} from '../models/num'; import {Action} from '@ngrx/store'; import {NumActionType} from '../actions/num'; export const modelNum = (state: Num = new Num(0), action: Action) => { switch (action.type) { case NumActionType.Add: state.count++; return state; default: return state; } };
不要忘记配置redurcer(app/app.module.ts)
imports: [ BrowserModule, RouterModule.forRoot(routes), StoreModule.forRoot({ modelNum}), //配置redurcer ],
第四部:创建组件
ng g component model-num
第五步:组件绑定数据模型(连带完成第六步)
组件html文件:
<div> <input (click)="add()" value="+" type="button"> <p>{{num.count}}</p> <input value="-" type="button"> <br/> <a routerLink="/list">to list demo</a> </div>
组件ts文件:
import {Component, OnInit} from '@angular/core'; import {Num} from '../models/num'; import {Store} from '@ngrx/store'; import {NumActionType} from '../actions/num';
@Component({
selector: 'app-model-demo',
templateUrl: './model-demo.component.html',
styleUrls: ['./model-demo.component.scss']
})
export class ModelDemoComponent implements OnInit {
constructor(private _store: Store<any>) {
this._store.select('modelNum').subscribe(mNum => { //涉及到rxjs。
this.num = mNum;
console.log(mNum);
});
}
public num: Num;
public add() {
console.log('add');
this._store.dispatch({ //调用dispatch触发添加redurces
type: NumActionType.Add
});
}
ngOnInit() {
}
}
完成相应的路由配置后,计数器案例完成。
现在开始案例2:在线获取用户列表并展示。
http://www.cnblogs.com/axel10/p/8589139.html
ngrx/store effects 使用总结1:计数器的更多相关文章
- ngrx/store effects 使用总结2:列表展示
第一个计数器案例:http://www.cnblogs.com/axel10/p/8589122.html 完成了计数器案例后,现在开始比较能够完整的展示angular2+开发流程的案例:在线获取用户 ...
- [Angular2] @Ngrx/store and @Ngrx/effects learning note
Just sharing the learning experience related to @ngrx/store and @ngrx/effects. In my personal opinio ...
- [Angular 2] ngrx/store
@ngrx/store builds on the concepts made popular by Redux and supercharges it with the backing of RxJ ...
- [Angular 2] Using ngrx/store and Reducers for Angular 2 Application State
ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an eas ...
- NgRx/Store 4 + Angular 5使用教程
这篇文章将会示范如何使用NgRx/Store 4和Angular5.@ngrx/store是基于RxJS的状态管理库,其灵感来源于Redux.在NgRx中,状态是由一个包含action和reducer ...
- Angular应用架构设计-3:Ngrx Store
这是有关Angular应用架构设计系列文章中的一篇,在这个系列当中,我会结合这近两年中对Angular.Ionic.甚至Vuejs等框架的使用经验,总结在应用设计和开发过程中遇到的问题.和总结的经验, ...
- [Angulalr] Speed Up Reducer Development Using Ngrx Schematics
When we use NGRX, we need to create some bolipates. Now with Angulalr6, we can use CLI to generate t ...
- [Angular] Improve Server Communication in Ngrx Effects with NX Data Persistence in Angular
Communicating with a remote server via HTTP presents an extra level of complexity as there is an inc ...
- [Angular] How to get Store state in ngrx Effect
For example, what you want to do is navgiate from current item to next or previous item. In your com ...
随机推荐
- 启动Activity的形式
问:为什么service里面startActivity抛异常,activity不会? No1: 启动activity有两种形式: 1)直接调用Context类的startActivity方法:这种方式 ...
- 使用sed删除拼音的音调
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- Service IP 原理 - 每天5分钟玩转 Docker 容器技术(137)
Service Cluster IP 是一个虚拟 IP,是由 Kubernetes 节点上的 iptables 规则管理的. 可以通过 iptables-save 命令打印出当前节点的 iptable ...
- js基本类型与引用类型,浅拷贝和深拷贝
1. 基本类型: string,number,boolean,null,undefined 2. 引用类型: Function,Array,Object 基本类型:存放在栈内存中的简单数据段,数据大小 ...
- HeapAlloc,GlobalAlloc,LocalAlloc,VirtualAlloc,malloc,new的异同
1. 首先我们来看HeapAlloc: MSDN上的解释为:HeapALloc是从堆上分配一块内存,且分配的内存是不可移动的(即如果没有连续的空间能满足分配的大小,程序不能将其他零散的 空间利用起来, ...
- hi3531串口波特率计算
波特率配置 通过配置寄存器UART_IBRD 和UART_FBRD 可以设置UART 工作的波特率,波特率 计算公式为: 当前波特率=UART 参考时钟频率(1/2 总线时钟频率)/(16 x 分频系 ...
- MySQL日期类型和毫秒值相互转换
有时需要将日期类型值转换成毫秒值,有时也要将毫秒值转换成日期,为了更方便,满足查询的需要. 现在,新建一张数据库表t_stu_info,并向表里插入数据 use test; show tables; ...
- (二十七)mongodb操作学习
在不使用mongodbVUE图形界面工具的情况下,打开数据库和集合后,如果要: 插入一条字段名为name,内容为java的记录,可以写成x={name:"java"};,然后 ...
- VxWorks启动过程详解(下)
上一节主要是从映像的分类和各种映像的大致加载流程上看VxWorks的启动过程,这一节让我们从函数级看一下VxWorks的启动过程: 1. Boot Image + Loadable Images: 下 ...
- BFS-九宫格重排(详解)
BFS将近两年没练过题了,今天重新回忆下以前刷的蓝桥杯题:九宫格重排 样例输入 //初始状态 //终点状态 样例输出 //最短步数 样例输入 //初始状态 //终点状态 样例输出 //最短步数 ...