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