1. 介绍ngrx
ngrx 相当于 Angular 版本的 redux，是 Angular 的状态管理工具
2. 安装依赖
ng add方式，会自动生成所需文件并在app.module.ts中导入
ng add @ngrx/store
ng add @ngrx/store-devtools
ng add @ngrx/effects
ng add @ngrx/router-store
action.ts：为要改变数据的操作定义不同action
effects.ts（有数据请求的）：通过判断action.type，来发起service
reducer.ts：判断action.type，返回新的store数据
component.ts：从store取数据
3. 计数器 demo
3.1 actions counter.action.ts
import { createAction } from '@ngrx/store';
export const increment = createAction('[counter component] increment');
export const decrement = createAction('[counter component] decrement');
export const reset = createAction('[counter component] reset');
3.2 reducers counter.recuder.ts
import { createReducer, on, State } from '@ngrx/store';
import * as Actions from './counter.action';
// 1. 定义一个初始状态
const initialState = 0;
const _reducer = createReducer(
initialState,
on(Actions.increment, state => state + 1),
on(Actions.decrement, state => state - 1),
on(Actions.reset, _ => 0)
);
export const counterReducer = (state, action) => {
return _reducer(state, action);
};
3.3 模块注册 app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { counterReducer } from './counter.reducer';
import { StoreModule } from '@ngrx/store';
import { MyCounterComponent } from './my-counter/my-counter.component';
@NgModule({
imports: [BrowserModule, StoreModule.forRoot({ counter: counterReducer })], //引入 storeModule
declarations: [AppComponent, MyCounterComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
3.4 编写组件
// my-counter.component.ts
import { Component } from '@angular/core';
import { Observable } from 'rxjs';
import { Store } from '@ngrx/store';
import * as counterActions from '../counter.action';
@Component({
selector: 'app-my-counter',
templateUrl: './my-counter.component.html',
styleUrls: ['./my-counter.component.css']
})
export class MyCounterComponent {
count$: Observable<number>;
constructor(private store$: Store<{ counter: number }>) {
// create count$
this.count$ = store$.select('counter');
console.log(this.count$);
}
increment() {
this.store$.dispatch(counterActions.increment());
}
decrement() {
this.store$.dispatch(counterActions.decrement());
}
reset() {
this.store$.dispatch(counterActions.reset());
}
}
<p>
{{count$ | async}}
</p>
<button (click)="increment()">increment</button>
<button (click)="decrement()">decrement</button>
<button (click)="reset()">reset</button>
