angular运行,angular状态管理工具

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

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

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

　　@ngrx/effects:处理副作用

　　@ngrx/store-devtools:浏览器调试工具，需要依赖Redux开发工具扩展

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

　　@ngrx/entity:提高开发者在还原剂中操作数据的效率

　　@ngrx/router-store:将路由状态同步到全局商店

快速开始

　　1、下载 NgRx

　　NPM安装@ ngrx/store @ ngrx/effects @ ngrx/entity @ ngrx/router-store @ ngrx/store-dev tools @ ngrx/schematics

　　2、配置 NgRx CLI

　　ng配置CLI。默认集合@ ngrx/schematics

　　//angular.json

　　cli: {

　　"默认集合":" @ngrx/schematics "

　　}3、创建 Store

　　ng g store状态-根-模块app。模块。ts状态路径存储状态接口AppState

　　4、创建 Action

　　ng g操作存储/操作/反跳过测试

　　从" @ngrx/store "导入{ createAction }

　　导出常量增量=createAction(increment )

　　导出常数减量=createAction(减量)5、创建 Reducer

　　ng g还原剂储存/还原剂/反skipTests -还原剂=./index.ts

　　从" @ngrx/store "导入{ createReducer，on }

　　从导入{减量，增量}./actions/counter.actions

　　export const counterFeatureKey= counter

　　导出接口状态{

　　计数：数量

　　}

　　导出const initialState: State={

　　计数：0

　　}

　　导出const reducer=createReducer(

　　初始状态，

　　on(increment，state=({ count: state.count 1 })，

　　在(减量，状态=({ count: state.count - 1 }))

　　)6、创建 Selector

　　ng g选择器存储/选择器/计数器跳过测试

　　从" @ngrx/store "导入{ createFeatureSelector，createSelector }

　　从导入{ counterFeatureKey，State }./减速器/计数器.减速器

　　从"."导入{ AppState }

　　export const select counter=createFeatureSelectorAppState，State(counterFeatureKey)

　　导出常量选择计数=创建选择器(选择计数器，状态=状态.计数)7、组件类触发 Action、获取状态

　　从" @ngrx/store "导入{选择，存储}

　　从" rxjs "导入{可观察的}

　　从""导入{ AppState } ./商店

　　从导入{减量，增量}。/商店/操作/计数器。操作

　　从导入{ selectCount } ./商店/选择器/计数器。选择器

　　导出类AppComponent {

　　计数：可观察数量

　　构造函数（私有存储：StoreAppState) {

　　这个。计数=这个。商店。管道(选择(选择计数))

　　}

　　增量(){

　　this.store.dispatch(increment())

　　}

　　减量(){

　　this.store.dispatch(decrement())

　　}

　　}8、组件模板显示状态

　　按钮（点击)= increment()/按钮

　　span{{ count async }}/span

　　按钮(点击)= decrement()-/button

Action Payload

　　 1、在组件中使用派遣触发行动时传递参数，参数最终会被放置在行动对象中。

　　这个。商店。dispatch(increment({ count:5 }))2、在创建动作创建者函数时，获取参数并指定参数类型。

　　从" @ngrx/store "导入{ createAction，props }

　　导出常量增量=创建操作( increment ，props{ count: number }())导出声明函数propsP扩展object():propsP；3、在还原剂中通过行动对象获取参数。

　　导出const reducer=createReducer(

　　初始状态，

　　在(增量，(状态，动作)=({ count:state。开始行动。count }))

　　)

MetaReducer

　　 metaReducer是行动减速器之间的钩子，允许开发者对行动进行预处理（在普通还原剂函数调用之前调用)。

　　函数调试(reducer:ActionReducerany):ActionReducerany {

　　返回函数（状态，动作){

　　返回减速器（状态、动作)

　　}

　　}

　　导出常量元还原器：元还原状态[]=！环境。生产

　　？[调试]

　　: []

Effect

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

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

　　button(click)= increment _ async() async/button 2在组件类中新增增量_异步方法，并在方法中触发执行异步操作的行动

　　增量异步()

　　这个。商店。分派(increment _ async()

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

　　export const increment _ async=create action( increment _ async )4，创建效果，接收行动并执行副作用，继续触发行动

　　ng g效果存储/效果/计数器-根-模块app.module.ts - skipTests

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

　　从" @角度/核心"导入{可注射}

　　从" @ngrx/effects "导入{动作，创建效果，类型}

　　从导入{增量，增量_异步}./actions/counter.actions

　　从" rxjs/运算符"导入{合并地图，地图}

　　从" rxjs "导入{计时器}

　　//createEffect

　　//用于创建效果，效果用于执行副作用。

　　//调用方法时传递回调函数，回调函数中返回可观察量对象，对象中要发出副作用执行完成后要触发的行动对象

　　//回调函数的返回值在创建效果方法内部被继续返回，最终返回值被存储在了影响类的属性中

　　//NgRx在实例化影响类后，会订阅影响类属性，当副作用执行完成后它会获取到要触发的行动对象并触发这个行动

　　//操作

　　//当组件触发行动时，效果需要通过行动服务接收行动，所以在影响类中通过构造器构造函数参数的方式将行动服务类的实例对象注入到影响类中

　　//操作服务类的实例对象为可观察量对象，当有行动被触发时，动作对象本身会作为数据流被发出

　　//ofType

　　//对目标行动对象进行过滤。

　　//参数为目标行动的动作创建者函数

　　//如果未过滤出目标行动对象，本次不会继续发送数据流

　　//如果过滤出目标行动对象，会将行动对象作为数据流继续发出

　　@可注射()

　　导出类别反效果{

　　构造函数（私有操作：操作){

　　//这个。装载计数。订阅(控制台。日志)

　　}

　　loadCount=createEffect(()={

　　返回this.actions.pipe(

　　ofType(increment_async)，

　　mergeMap(()=timer(1000).管道(映射(()=增量({ count: 10 }))

　　)

　　})

　　}

Entity

　　1、概述

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

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

　　2、核心

　　1、实体状态：实体类型接口

　　/*

　　{

　　id:[1，2]，

　　实体：{

　　1: { id: 1，标题： Hello Angular }，

　　2: { id: 2，标题：你好NgRx }

　　}

　　}

　　*/

　　导出接口状态扩展EntityStateTodo {}2、createEntityAdapter:创建实体适配器对象

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

　　导出常量适配器：EntityAdapterTodo=createEntityAdapterTodo()

　　//获取初始状态可以传递对象参数也可以不传

　　//{ id:[]，实体：{}}

　　export const initial State:State=adapter。getinitialstate()3、实例方法

　　https://ngrx。io/指南/实体/适配器#适配器-集合-方法

　　4、选择器

　　//selectTotal获取数据条数

　　//选择全部获取所有数据以数组形式呈现

　　//选择实体获取实体集合以字典形式呈现

　　//selectIds获取编号集合，以数组形式呈现

　　const { selectIds，selectEntities，selectAll，select total }=adapter。获取选择器()；export const selectTodo=createFeatureSelectorAppState，State(todoFeatureKey)

　　export const selectTodos=create selector(select todo，selectAll)

Router Store

　　1、同步路由状态

　　1)引入模块

　　从" @ ngrx/路由器商店"导入{ StoreRouterConnectingModule }

　　@NgModule({

　　进口：[

　　storerouterconnectingmodule。对于根()

　　]

　　})

　　导出类AppModule {}2)将路由状态集成到商店

　　从@ngrx/router-store 从路由器导入*作为

　　导出接口AppState {

　　路由器：来自路由器。路由器还原状态

　　}

　　导出常数缩减器：ActionReducerMapAppState={

　　路由器：fromRouter.routerReducer

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

　　//路由器。选择器。分时（同timesharing）

　　从" @ngrx/store "导入{ createfeatureselect }

　　从"."导入{ AppState }

　　从" @ ngrx/路由器商店"导入{ RouterReducerState，getSelectors }

　　const select router=createFeatureSelectorAppState，RouterReducerState(

　　路由器

　　)

　　出口成本{

　　//获取和当前路由相关的信息（路由参数、路由配置等)

　　选择当前路由，

　　//获取地址栏中# 号后面的内容

　　选择片段，

　　//获取路由查询参数

　　选择查询参数，

　　//获取具体的某一个查询参数选择QueryParam(name )

　　选择QueryParam，

　　//获取动态路由参数

　　选择路由参数，

　　//获取某一个具体的动态路由参数selectRouteParam(name )

　　选择路由参数，

　　//获取路由自定义数据

　　选择路由数据，

　　//获取路由的实际访问地址

　　选择全球资源定位器(Uniform Resource Locator)

　　}=get选择器(选择路由器)//home。组件。分时（同timesharing）

　　从" @ngrx/store "导入{选择，存储}

　　从"服务资源中心/应用程序/商店"导入{ AppState }

　　从“src/app/store/选择器/路由器。选择器"导入{ selectQueryParams }

　　导出关于组件的类{

　　构造函数（私有存储：StoreAppState) {

　　这个。商店。管道(选择(选择查询参数)).订阅(console.log)

　　}

　　}更多编程相关知识，请访问：编程视频！以上就是有角的学习之详解状态管理器NgRx的详细内容，更多请关注我们其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。