ngrx 笔记

ngrx

什么是Redux?

   Redux是为了解决应用程序状态（State）管理而提出的一种解决方案。对于应用开发来说，UI上显示的数据、控件状态、登录状态、数据加载画面的不一样状态等等所有能够看做状态。

Redux 的三个概念：Reducer、Action、Store

Store 通常负责：保存应用状态、提供访问状态的方法、派发Action的方法以及对于状态订阅者的注册和取消等。(能够理解成内存数据库)

Reducer 其实就是用来维护状态的。reduce就是对数组元素进行累加计算成为一个值。（能够理解成数据库表，但这种说法不太精确）

Action 在Redux规范中，全部的会引起状态更新的交互行为都必须经过一个显性定义的Action来进行。(Reducer和Store之间的通讯靠Action)

注意：

export interface Action { type: string; payload?: any; // 这个值无关紧要 }

ngrx是一套利用RxJS的类库,其中@ngrx/store就是基于Redux规范制定的Angular2框架。

@ngrx/store

RxJS 基于Redux的设计思想，为Angular应用提供强有力的状态管理工具

@ngrx/store是一个旨在提升写性能的控制状态的容器，在angular的应用程序上是一致的。

核心：

• State是一个不可变的数据结构
• Action描述State的改变
• Reducer(纯函数)拿到下一个State和以前的State来计算一个新的State。
• 经过Store访问State,一个可观测state和一个actions观察者

安装使用：npm install @ngrx/store --save 或 yarn add @ngrx/store

State 与 Angular的Component的关系

• State驱动Component进行渲染(this.store.dispatch)
• Component发action来改变State

@ngrx/effects

@ngrx/effects 提供一套API(装饰器 @Effect( ) 和 Action) 来帮助检查Store.dispatch( )出来的 Action。将特定类型的 Action 过滤出来进行处理，监听特定Action，当发现特定的Action发出以后，自动执行某些操做，而后将处理的结果从新发送回 store 中。

核心：

• 监听派发出来(@ngrx/store 的Store.dispatch)的Action
• 隔离业务和组件(Component只经过select state 和 dispatch actions便可)
• 提供新的reducer state(基于网络请求、web socket 消息 或 time事件驱动[定时刷新])

安装使用：npm install @ngrx/effects --save 或 yarn add @ngrx/effects

Effects 一般注入到service类

注册Effect

EffectsModule.forRoot( ) 必须在根模块下注册,若是不须要注册任何根级别的Effect，能够Provider一个空数组。

//app.module.ts @NgModule({ imports: [ EffectsModule.forRoot([ SourceA, SourceB, SourceC, ]) //EffectsModule.forRoot([]) //提供一个空数组  ] }) export class AppModule { }

EffectsModule.forFeature( ) 能够在任何ng模块使用（导入）EffectsModule.forFeature(),不管是根模块(AppModule)，仍是任何一个功能模块。

//feature.module.ts @NgModule({ imports: [ EffectsModule.forFeature([ FeatureSourceA, FeatureSourceB, FeatureSourceC, ]) ] }) export class FeatureModule { }

Init Action

import { Injectable } from '@angular/core'; import { Actions } from '@ngrx/effects'; @Injectable() export class SomeEffectsClass { constructor(private actions$: Actions) {} }

示例：

import { Action } from '@ngrx/store'; import { Actions, Effect } from '@ngrx/effects'; import { defer } from 'rxjs/observable/defer'; import * as auth from '../actions/auth.actions'; @Injectable() export class AppEffects { @Effect() init$: Observable<Action> = defer(() => { return of(new auth.LoginAction()); }); constructor(private actions$: Actions) { } }

ofType

import { Injectable } from '@angular/core'; import { Actions, Effect, ofType } from '@ngrx/effects'; import { tap } from 'rxjs/operators'; @Injectable() export class SomeEffectsClass { constructor(private actions$: Actions) {} @Effect() authActions$ = this.action$.pipe( ofType<LoginAction | LogoutAction>('LOGIN', 'LOGOUT'), tap(action => console.log(action)) ); }

@ngrx/router-store

经过@ngrx/store绑定链接angular路由

安装使用：npm install @ngrx/router-store --save 或 yarn add @ngrx/router-store

/**
 * Payload of ROUTER_NAVIGATION.  */ export declare type RouterNavigationPayload<T> = { routerState: T; event: RoutesRecognized; }; /**  * An action dispatched when the router navigates.  */ export declare type RouterNavigationAction<T = RouterStateSnapshot> = { type: typeof ROUTER_NAVIGATION; payload: RouterNavigationPayload<T>; };

注册使用@ngrx/router-store

import { StoreRouterConnectingModule, routerReducer } from '@ngrx/router-store'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, StoreModule.forRoot({ routerReducer: routerReducer }), RouterModule.forRoot([ // routes  ]), StoreRouterConnectingModule.forRoot() ], bootstrap: [AppComponent] }) export class AppModule { }

@ngrx/store-devtools

@ngrx/store 的开发工具

import { StoreDevtoolsModule } from '@ngrx/store-devtools'; import { environment } from '../environments/environment'; // Angular CLI environemnt  @NgModule({ imports: [ StoreModule.forRoot(reducers), // Instrumentation must be imported after importing StoreModule (config is optional)  !environment.production ? StoreDevtoolsModule.instrument({ maxAge: 25 // Retains last 25 states  }) : [], ] }) export class AppModule { }

@ngrx/entity

安装使用：npm install @ngrx/entity --save 或 yarn add @ngrx/entity