广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

本篇文章带大家深入了解一下angular的状态管理器NgRx，介绍一下NgRx的使用方法，希望对大家有所帮助！

NgRx 是 Angular 应用中实现全局状态管理的 Redux 架构解决方案。【相关教程推荐：《angular教程》】

@ngrx/store：全局状态管理模块

@ngrx/effects：处理副作用

@ngrx/store-devtools：浏览器调试工具，需要依赖 Redux Devtools Extension

@ngrx/schematics：命令行工具，快速生成 NgRx 文件

@ngrx/entity：提高开发者在 Reducer 中操作数据的效率

@ngrx/router-store：将路由状态同步到全局 Store

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<AppState, State>(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<number>  constructor(private store: Store<AppState>) {    this.count = this.store.pipe(select(selectCount))  }  increment() {    this.store.dispatch(increment())  }  decrement() {    this.store.dispatch(decrement())  }}

8、组件模板显示状态

<button (click)="increment()">+</button><span>{{ count | async }}</span><button (click)="decrement()">-</button>

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<P extends object>(): Props<P>;

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

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

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

import { createAction } from "@ngrx/store"export const increment = createAction("increment")export const decrement = createAction("decrement")0

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

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

import { createAction } from "@ngrx/store"export const increment = createAction("increment")export const decrement = createAction("decrement")1

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

import { createAction } from "@ngrx/store"export const increment = createAction("increment")export const decrement = createAction("decrement")2

3、在 Action 文件中新增执行异步操作的 Action

import { createAction } from "@ngrx/store"export const increment = createAction("increment")export const decrement = createAction("decrement")3

4、创建 Effect，接收 Action 并执行副作用，继续触发 Action

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

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

import { createAction } from "@ngrx/store"export const increment = createAction("increment")export const decrement = createAction("decrement")4

1、概述

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

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

2、核心

1、EntityState：实体类型接口

import { createAction } from "@ngrx/store"export const increment = createAction("increment")export const decrement = createAction("decrement")5

2、createEntityAdapter： 创建实体适配器对象

3、EntityAdapter：实体适配器对象类型接口

import { createAction } from "@ngrx/store"export const increment = createAction("increment")export const decrement = createAction("decrement")6

3、实例方法

https://ngrx.io/guide/entity/adapter#adapter-collection-methods

4、选择器

import { createAction } from "@ngrx/store"export const increment = createAction("increment")export const decrement = createAction("decrement")7

import { createAction } from "@ngrx/store"export const increment = createAction("increment")export const decrement = createAction("decrement")8

1、同步路由状态

1）引入模块

import { createAction } from "@ngrx/store"export const increment = createAction("increment")export const decrement = createAction("decrement")9

2）将路由状态集成到 Store

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 })))0

2、创建获取路由状态的 Selector

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 })))1

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 })))2

更多编程相关知识，请访问：编程视频！！

以上就是angular学习之详解状态管理器NgRx的详细内容，更多请关注9543建站博客其它相关文章！