本教程案例github：https://github.com/axel10/ngrx_demo-counter-and-list angular2+ 的學習成本應該是三大框架中最高的一個，教程及案例稀缺，流程較為複雜，這裡我用計數器和線上獲取用戶數據並渲染成列表這兩個案例來幫大家快速入手angula ...
本教程案例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
