NgRx

1. 概述

NgRxAngular 应用中实现全局状态管理的 Redux 架构解决方案

  1. @ngrx/store:全局状态管理模块
  2. @ngrx/effects:处理副作用
  3. @ngrx/store-devtools:浏览器调试工具,需要依赖 Redux Devtools Extension
  4. @ngrx/schematics:命令行工具,快速生成 NgRx 文件
  5. @ngrx/entity:提高开发者在 Reducer 中操作数据的效率
  6. @ngrx/router-store:将路由状态同步到全局 Store

2. 快速开始

  1. 下载 NgRx

    npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/router-store @ngrx/store-devtools @ngrx/schematics
    
  2. 配置 NgRx CLI

    ng config cli.defaultCollection @ngrx/schematics
    
    // angular.json
    "cli": {
      "defaultCollection": "@ngrx/schematics"
    }
    
  3. 创建 Store

    ng g store State --root --module app.module.ts --statePath store --stateInterface AppState
    
  4. 创建 Action

    ng g action store/actions/counter --skipTests
    
    import { createAction } from "@ngrx/store"
    
    export const increment = createAction("increment")
    export const decrement = createAction("decrement")
    
  5. 创建 Reducer

    ng g reducer store/reducers/counter --skipTests --reducers=../index.ts
    
    import { createReducer, on } from "@ngrx/store"
    import { decrement, increment } from "../actions/counter.actions"
    
    export const counterFeatureKey = "counter"
    
    export interface State {
      count: number
    }
    
    export const initialState: State = {
      count: 0
    }
    
    export const reducer = createReducer(
      initialState,
      on(increment, state => ({ count: state.count + 1 })),
      on(decrement, state => ({ count: state.count - 1 }))
    )
    
  6. 创建 Selector

    ng g selector store/selectors/counter --skipTests
    
    import { createFeatureSelector, createSelector } from "@ngrx/store"
    import { counterFeatureKey, State } from "../reducers/counter.reducer"
    import { AppState } from ".."
    
    export const selectCounter = createFeatureSelector(counterFeatureKey)
    export const selectCount = createSelector(selectCounter, state => state.count)
    
  7. 组件类触发 Action、获取状态

    import { select, Store } from "@ngrx/store"
    import { Observable } from "rxjs"
    import { AppState } from "./store"
    import { decrement, increment } from "./store/actions/counter.actions"
    import { selectCount } from "./store/selectors/counter.selectors"
    
    export class AppComponent {
      count: Observable
      constructor(private store: Store) {
        this.count = this.store.pipe(select(selectCount))
      }
      increment() {
        this.store.dispatch(increment())
      }
      decrement() {
        this.store.dispatch(decrement())
      }
    }
    
  8. 组件模板显示状态

    
    {{ count | async }}
    
    

3. Action Payload

  1. 在组件中使用 dispatch 触发 Action 时传递参数,参数最终会被放置在 Action 对象中

    this.store.dispatch(increment({ count: 5 }))
    
  2. 在创建 Action Creator 函数时,获取参数并指定参数类型。

    import { createAction, props } from "@ngrx/store"
    export const increment = createAction("increment", props<{ count: number }>())
    
    export declare function props

    (): Props

    ;

  3. Reducer 中通过 Action 对象获取参数。

    export const reducer = createReducer(
      initialState,
      on(increment, (state, action) => ({ count: state.count + action.count }))
    )
    

4. MetaReducer

metaReducerAction -> Reducer 之间的钩子,允许开发者对 Action 进行预处理 (在普通 Reducer 函数调用之前调用)

function debug(reducer: ActionReducer): ActionReducer {
  return function (state, action) {
    return reducer(state, action)
  }
}

export const metaReducers: MetaReducer[] = !environment.production
  ? [debug]
  : []

5. Effect

需求:在页面中新增一个按钮,点击按钮后延迟一秒让数值增加

  1. 在组件模板中新增一个用于异步数值增加的按钮,按钮被点击后执行 increment_async 方法

    
    
  2. 在组件类中新增 increment_async 方法,并在方法中触发执行异步操作的 Action

    increment_async() {
      this.store.dispatch(increment_async())
    }
    
  3. 在 Action 文件中新增执行异步操作的 Action

    export const increment_async = createAction("increment_async")
    
  4. 创建 Effect,接收 Action 并执行副作用,继续触发 Action

    ng g effect store/effects/counter --root --module app.module.ts --skipTests
    

    Effect 功能由 @ngrx/effects 模块提供,所以在根模块中需要导入相关的模块依赖

    import { Injectable } from "@angular/core"
    import { Actions, createEffect, ofType } from "@ngrx/effects"
    import { increment, increment_async } from "../actions/counter.actions"
    import { mergeMap, map } from "rxjs/operators"
    import { timer } from "rxjs"
    
    // createEffect
    // 用于创建 Effect, Effect 用于执行副作用.
    // 调用方法时传递回调函数, 回调函数中返回 Observable 对象, 对象中要发出副作用执行完成后要触发的 Action 对象
    // 回调函数的返回值在 createEffect 方法内部被继续返回, 最终返回值被存储在了 Effect 类的属性中
    // NgRx 在实例化 Effect 类后, 会订阅 Effect 类属性, 当副作用执行完成后它会获取到要触发的 Action 对象并触发这个 Action
    
    // Actions
    // 当组件触发 Action 时, Effect 需要通过 Actions 服务接收 Action, 所以在 Effect 类中通过 constructor 构造函数参数的方式将 Actions 服务类的实例对象注入到 Effect 类中
    // Actions 服务类的实例对象为 Observable 对象, 当有 Action 被触发时, Action 对象本身会作为数据流被发出
    
    // ofType
    // 对目标 Action 对象进行过滤.
    // 参数为目标 Action 的 Action Creator 函数
    // 如果未过滤出目标 Action 对象, 本次不会继续发送数据流
    // 如果过滤出目标 Action 对象, 会将 Action 对象作为数据流继续发出
    
    @Injectable()
    export class CounterEffects {
      constructor(private actions: Actions) {
        // this.loadCount.subscribe(console.log)
      }
      loadCount = createEffect(() => {
        return this.actions.pipe(
          ofType(increment_async),
          mergeMap(
            () => timer(1000)
            .pipe(
              map(() => increment({ count: 10 }))
            )
          )
        )
      })
    }
    

6. Entity

6.1 概述

Entity 译为实体,实体就是集合中的一条数据

NgRx 中提供了实体适配器对象,在实体适配器对象下面提供了各种操作集合中实体的方法,目的就是提高开发者操作实体的效率

6.2 核心

  1. EntityState:实体类型接口

    /*
      {
        ids: [1, 2],
        entities: {
          1: { id: 1, title: "Hello Angular" },
          2: { id: 2, title: "Hello NgRx" }
        }
      }
    */
    export interface State extends EntityState {}
    
  2. createEntityAdapter: 创建实体适配器对象

  3. EntityAdapter:实体适配器对象类型接口

    export const adapter: EntityAdapter = createEntityAdapter()
    // 获取初始状态 可以传递对象参数 也可以不传
    // {ids: [], entities: {}}
    export const initialState: State = adapter.getInitialState()
    

6.3 实例方法

6.4 选择器

// selectTotal 获取数据条数
// selectAll 获取所有数据 以数组形式呈现
// selectEntities 获取实体集合 以字典形式呈现
// selectIds 获取id集合, 以数组形式呈现
const { selectIds, selectEntities, selectAll, selectTotal } = adapter.getSelectors();
export const selectTodo = createFeatureSelector(todoFeatureKey)
export const selectTodos = createSelector(selectTodo, selectAll)

7. Router Store

7.1 同步路由状态

  1. 引入模块

    import { StoreRouterConnectingModule } from "@ngrx/router-store"
    
    @NgModule({
      imports: [
        StoreRouterConnectingModule.forRoot()
      ]
    })
    export class AppModule {}
    
  2. 将路由状态集成到 Store

    import * as fromRouter from "@ngrx/router-store"
    
    export interface AppState {
      router: fromRouter.RouterReducerState
    }
    export const reducers: ActionReducerMap = {
      router: fromRouter.routerReducer
    }
    

7.2 创建获取路由状态的 Selector

// router.selectors.ts
import { createFeatureSelector } from "@ngrx/store"
import { AppState } from ".."
import { RouterReducerState, getSelectors } from "@ngrx/router-store"

const selectRouter = createFeatureSelector(
  "router"
)

export const {
  // 获取和当前路由相关的信息 (路由参数、路由配置等)
  selectCurrentRoute,
  // 获取地址栏中 # 号后面的内容
  selectFragment,
  // 获取路由查询参数
  selectQueryParams,
  // 获取具体的某一个查询参数 selectQueryParam('name')
  selectQueryParam,
  // 获取动态路由参数
  selectRouteParams,
  // 获取某一个具体的动态路由参数 selectRouteParam('name')
  selectRouteParam,
  // 获取路由自定义数据
  selectRouteData,
  // 获取路由的实际访问地址
  selectUrl
} = getSelectors(selectRouter)
// home.component.ts
import { select, Store } from "@ngrx/store"
import { AppState } from "src/app/store"
import { selectQueryParams } from "src/app/store/selectors/router.selectors"

export class AboutComponent {
  constructor(private store: Store) {
    this.store.pipe(select(selectQueryParams)).subscribe(console.log)
  }
}

你可能感兴趣的:(NgRx)