Angular 官方框架本身提供了较为全面的功能，但是却缺少诸如 Redux，Vuex 之类的状态管理框架，而 NgRx 就是弥补这个缺陷的一个第三方框架。参考了 Redux 的思想，结合了 RxJs 流的处理

1、@ngrx/store

  • 基本使用
  1. // 1、创建 Action
  2. import { createAction } from '@ngrx/store';
  4. export const increment = createAction('[Counter Component] Increment');
  5. export const decrement = createAction('[Counter Component] Decrement');
  6. export const reset = createAction('[Counter Component] Reset');
  8. // 2、创建 Reducer
  9. import { createReducer, on } from '@ngrx/store';
  10. import { increment, decrement, reset } from './actions';
  12. export const initialState = 0;
  13. const _counterReducer = createReducer(initialState,
  14.   on(increment, state => state + 1),
  15.   on(decrement, state => state - 1),
  16.   on(reset, state => 0),
  17. );
  18. export function counterReducer(state, action) {
  19.   return _counterReducer(state, action);
  20. }
  21. // 3、AppModule 中引入
  22. import { BrowserModule } from '@angular/platform-browser';
  23. import { NgModule } from '@angular/core';
  24. import { AppComponent } from './app.component';
  26. import { StoreModule } from '@ngrx/store';
  27. import { counterReducer } from './reducer';
  29. @NgModule({
  30.   declarations: [AppComponent],
  31.   imports: [
  32.     BrowserModule,
  33.     StoreModule.forRoot({ count: counterReducer })
  34.   ],
  35.   providers: [],
  36.   bootstrap: [AppComponent],
  37. })
  38. export class AppModule {}
  39. // 4、组件中调用
  40. import { Component } from '@angular/core';
  41. import { Store, select } from '@ngrx/store';
  42. import { Observable } from 'rxjs';
  43. import { increment, decrement, reset } from '../actions';
  45. @Component({
  46.   selector: 'app-my-counter',
  47.   templateUrl: './my-counter.component.html',
  48.   styleUrls: ['./my-counter.component.css'],
  49. })
  50. export class MyCounterComponent {
  51.   count$: Observable<number>;
  53.   constructor(private store: Store<{ count: number }>) {  //依赖注入
  54.     this.count$ = store.pipe(select('count'));  // 使用 select 函数取值
  55.   }
  57.   increment() {
  58.     this.store.dispatch(increment());
  59.   }
  61.   decrement() {
  62.     this.store.dispatch(decrement());
  63.   }
  65.   reset() {
  66.     this.store.dispatch(reset());
  67.   }
  68. }
  70. <button id="increment" (click)="increment()">Increment</button>
  72. <div>Current Count: {{ count$ | async }}</div>  // 管道符取值
  74. <button id="decrement" (click)="decrement()">Decrement</button>
  76. <button id="reset" (click)="reset()">Reset Counter</button>
  • 进阶

1、createAction 第二个函数参数

  1. import { createAction, props } from '@ngrx/store';
  3. export const login = createAction(
  4.   '[Login Page] Login',
  5.   props<{ username: string; password: string }>()
  6. );
  8. onSubmit(username: string, password: string) {
  9.   store.dispatch(login({ username: username, password: password }));
  10. }

2、feature State

  1. // 定义一个子状态
  2. import { createSelector, createFeatureSelector } from '@ngrx/store';
  4. export const featureKey = 'feature';
  6. export interface FeatureState {
  7.   counter: number;
  8. }
  10. export interface AppState {
  11.   feature: FeatureState;
  12. }
  14. export const selectFeature = createFeatureSelector<AppState, FeatureState>(featureKey);
  16. export const selectFeatureCount = createSelector(
  17.   selectFeature,
  18.   (state: FeatureState) => state.counter
  19. );
  20. // 2、子模块上注册子状态
  21. import { NgModule } from '@angular/core';
  22. import { StoreModule } from '@ngrx/store';
  23. import * as fromScoreboard from './reducers/scoreboard.reducer';
  25. @NgModule({
  26.   imports: [
  27.     StoreModule.forFeature(fromScoreboard.featureKey, fromScoreboard.reducer)
  28.   ],
  29. })
  30. export class ScoreboardModule {}
  32. // 2、在根模块注册
  33. import { NgModule } from '@angular/core';
  34. import { StoreModule } from '@ngrx/store';
  35. import { ScoreboardModule } from './scoreboard/scoreboard.module';
  37. @NgModule({
  38.   imports: [
  39.     StoreModule.forRoot({}),
  40.     ScoreboardModule
  41.   ],
  42. })
  43. export class AppModule {}

3、createSelector 参数函数的第二个参数

  1. export const getCount = createSelector(
  2.   getCounterValue,
  3.   (counter, props) => counter * props.multiply
  4. );
  6. ngOnInit() {
  7.   this.counter$ = this.store.pipe(select(fromRoot.getCount, { multiply: 2 }))
  8. }

4、meta-reducer
本质上相当于 Redux 的中间价

  1. import { StoreModule, ActionReducer, MetaReducer } from '@ngrx/store';
  2. import { reducers } from './reducers';
  4. // console.log all actions
  5. export function debug(reducer: ActionReducer<any>): ActionReducer<any> {
  6.   return function(state, action) {
  7.     console.log('state', state);
  8.     console.log('action', action);
  10.     return reducer(state, action);
  11.   };
  12. }
  14. export const metaReducers: MetaReducer<any>[] = [debug];
  16. @NgModule({
  17.   imports: [
  18.     StoreModule.forRoot(reducers, { metaReducers })
  19.   ],
  20. })
  21. export class AppModule {}

2、@ngrx/effects

effects 用于监听 action，是一种异步 action 处理方案，类似 redux-saga

1、基础

  1. // 1、创建 effect
  2. import { Injectable } from '@angular/core';
  3. import { Actions, createEffect, ofType } from '@ngrx/effects';
  4. import { of } from 'rxjs';
  5. import { map, mergeMap, catchError } from 'rxjs/operators';
  6. import { MoviesService } from './movies.service';
  8. @Injectable()
  9. export class MovieEffects {
  10.   loadMovies$ = createEffect(() =>
  11.     this.actions$.pipe(
  12.       ofType('[Movies Page] Load Movies'),
  13.       mergeMap(() => this.moviesService.getAll()
  14.         .pipe(
  15.           map(movies => ({ type: '[Movies API] Movies Loaded Success', payload: movies })),
  16.           catchError(() => of({ type: '[Movies API] Movies Loaded Error' }))
  17.         )
  18.       )
  19.     )
  20.   );
  22.   constructor(
  23.     private actions$: Actions,
  24.     private moviesService: MoviesService
  25.   ) {}
  26. }
  27. // 2、注册 effect
  28. import { EffectsModule } from '@ngrx/effects';
  29. import { MovieEffects } from './effects/movie.effects';
  31. @NgModule({
  32.   imports: [
  33.     EffectsModule.forRoot([MovieEffects])
  34.   ],
  35. })
  36. export class AppModule {}
  38. // 或者注册 feature effect
  39. import { EffectsModule } from '@ngrx/effects';
  40. import { MovieEffects } from './effects/movie.effects';
  42. @NgModule({
  43.   imports: [
  44.     EffectsModule.forFeature([MovieEffects])
  45.   ],
  46. })
  47. export class MovieModule {}

2、进阶

a、处理不 dispatch action 的 effect

  1. import { Injectable } from '@angular/core';
  2. import { Actions, createEffect } from '@ngrx/effects';
  3. import { tap } from 'rxjs/operators';
  5. @Injectable()
  6. export class LogEffects {
  7.   constructor(private actions$: Actions) {}
  9.   logActions$ = createEffect(() =>
  10.     this.actions$.pipe(
  11.       tap(action => console.log(action))
  12.     ), { dispatch: false });  // 这里 dispatch:false 表示该action不会 dispatch
  13. }

b、effect 错误处理: 关闭 resubscriptions

  1. import { Injectable } from '@angular/core';
  2. import { Actions, ofType, createEffect } from '@ngrx/effects';
  3. import { of } from 'rxjs';
  4. import { catchError, exhaustMap, map } from 'rxjs/operators';
  5. import {
  6.   LoginPageActions,
  7.   AuthApiActions,
  8. } from '../actions';
  9. import { AuthService } from '../services/auth.service';
  11. @Injectable()
  12. export class AuthEffects {
  13.   logins$ = createEffect(
  14.     () =>
  15.       this.actions$.pipe(
  16.         ofType(LoginPageActions.login),
  17.         exhaustMap(action =>
  18.           this.authService.login(action.credentials).pipe(
  19.             map(user => AuthApiActions.loginSuccess({ user })),
  20.             catchError(error => of(AuthApiActions.loginFailure({ error })))
  21.           )
  22.         )
  23.         // Errors are handled and it is safe to disable resubscription
  24.       ),
  25.     { useEffectsErrorHandler: false }
  26.   );
  28.   constructor(
  29.     private actions$: Actions,
  30.     private authService: AuthService
  31.   ) {}
  32. }

c、自定义 effect 错误处理
EFFECTS_ERROR_HANDLER

3、其它

  • @ngrx/store-devtools
    调试工具
  • @ngrx/router-store
    跟 Angular 路由结合
  • @ngrx/entity
    方便 reducer 操作 state
  • @ngrx/data
    将 action、reducer、entity、effect 等进行了高度组合抽象，提供了一系列更新 entity 的 API。就是说数据的更新得用它的api来，不是很自由
  1. import { Component, OnInit } from '@angular/core';
  2. import { Observable } from 'rxjs';
  3. import { Hero } from '../../core';
  4. import { HeroService } from '../hero.service';
  6. @Component({
  7.   selector: 'app-heroes',
  8.   templateUrl: './heroes.component.html',
  9.   styleUrls: ['./heroes.component.scss']
  10. })
  11. export class HeroesComponent implements OnInit {
  12.   loading$: Observable<boolean>;
  13.   heroes$: Observable<Hero[]>;
  15.   constructor(private heroService: HeroService) {
  16.     this.heroes$ = heroService.entities$;
  17.     this.loading$ = heroService.loading$;
  18.   }
  20.   ngOnInit() {
  21.     this.getHeroes();
  22.   }
  24.   add(hero: Hero) {
  25.     this.heroService.add(hero);
  26.   }
  28.   delete(hero: Hero) {
  29.     this.heroService.delete(hero.id);
  30.   }
  32.   getHeroes() {
  33.     this.heroService.getAll();
  34.   }
  36.   update(hero: Hero) {
  37.     this.heroService.update(hero);
  38.   }
  39. }

参考

https://ngrx.io/docs