Angular狀態管理框架NgRx入門

ngrx概念

• 一個框架
• 用於構建Angular8響應式應用
• 用於狀態管理
• 使用可觀察對象
• 使用Typescript
• 使用OnPush策略，變更檢測更高效
• 狀態序列化存儲
• 易於測試

原理圖

• component產生action(事件)
• action觸發effect，業務處理數據
• store中存儲state、reducer
• reducer產生新的state
• state修改，更新component

簡單入門

初始化項目

ng new ngrx-demo

> ng new ngrx-demo 
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/
documentation/syntax#scss ]
CREATE ngrx-demo/README.md (1026 bytes)
CREATE ngrx-demo/.editorconfig (246 bytes)
CREATE ngrx-demo/.gitignore (631 bytes)
CREATE ngrx-demo/angular.json (3705 bytes)
CREATE ngrx-demo/package.json (1295 bytes)
CREATE ngrx-demo/tsconfig.json (543 bytes)
CREATE ngrx-demo/tslint.json (1953 bytes)
CREATE ngrx-demo/browserslist (429 bytes)
CREATE ngrx-demo/karma.conf.js (1021 bytes)
CREATE ngrx-demo/tsconfig.app.json (270 bytes)
CREATE ngrx-demo/tsconfig.spec.json (270 bytes)
CREATE ngrx-demo/src/favicon.ico (948 bytes)
CREATE ngrx-demo/src/index.html (294 bytes)
CREATE ngrx-demo/src/main.ts (372 bytes)
....
added 1461 packages from 1071 contributors in 85.831s
 Successfully initialized git.

安裝ngrx

npm install @ngrx/store --save

創建Angular組件my-counter

ng generate @schematics/angular:component my-counter --style=scss <

定義action

//app/counter.actions.ts
import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
export const reset = createAction('[Counter Component] Reset');

定義reducer初始狀態為數值

//app/counter.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

export const initialState = 0;

const _counterReducer = createReducer(initialState,
 on(increment, state => state + 1),
 on(decrement, state => state - 1),
 on(reset, state => 0),
);

export function counterReducer(state, action) {
 return _counterReducer(state, action);
}

註冊state

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

@NgModule({
 declarations: [AppComponent],
 imports: [
 BrowserModule,
 StoreModule.forRoot({ count: counterReducer }) // 註冊時指定key
 ],
 providers: [],
 bootstrap: [AppComponent],
}) 

export class AppModule {}

定義組件

# app / my-counter / my-counter.component.html

<button>Increment/<button>
Current Count: {{ count$ | async }}
 
<button>Decrement/<button>
<button>Reset Counter/<button>

組件觸發action

# app / my-counter / my-counter.component.ts

import { Component } from '@angular/core';
import { Store, select } from '@ngrx/store';
import { Observable } from 'rxjs';
import { increment, decrement, reset } from '../counter.actions';

@Component({
 selector: 'app-my-counter',
 templateUrl: './my-counter.component.html',
 styleUrls: ['./my-counter.component.css'],
})
export class MyCounterComponent {
 count$: Observable<number>;

 constructor(private store: Store) {
 this.count$ = store.pipe(select('count')); //這裡關鍵點，在於app.module.ts註冊時候的key
 }

 increment() {
 this.store.dispatch(increment());
 }

 decrement() {
 this.store.dispatch(decrement());
 }

 reset() {
 this.store.dispatch(reset());
 }
}/<number>

組件生效

// app.component.html 

 this is app component 
 <app-my-counter>

//界面按鈕點擊，觀測數據變化

store.pipe寫法解惑

//查看store源碼，我們得到Observable 
export declare class Store extends Observable implements Observer<action> {
 ....
}/<action>

store.select也是Observable

export declare function select(mapFn: (state: T, props: Props) => K, props?: Props): (source$: Observable) => Observable;

this.store
 .select(fromStore.getProductsState)
 .map(state => state.pizzas)
 .map(pizzas => pizza.entities);

進階

當reducer初始狀態state為對象時

//counter.reducer.ts
import { createReducer, on } from '@ngrx/store';
import { increment, decrement, reset } from './counter.actions';

export interface State {
 away: number;
} 


export const initialState: State = { 
 away: 0,
};

const _counterReducer = createReducer(initialState,
 on(increment, state => ({...state, away: state.away + 1})),
 on(decrement, state => ({...state, away: state.away - 1})),
 on(reset, state => ({...state, away: 0})),
);

export function counterReducer(state, action) {
 return _counterReducer(state, action);
}

延遲加載state註冊

# 新增文件app/feature.module.ts
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';

@NgModule({
 imports: [
 StoreModule.forFeature('countFeture', counterReducer) # 需要注意，對應的調整
 ],
})
export class ScoreboardModule {}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';
import { MyCounterComponent } from './my-counter/my-counter.component';
import { ScoreboardModule } from './feature.module';

@NgModule({
 declarations: [
 AppComponent,
 MyCounterComponent
 ],
 imports: [
 BrowserModule,
 AppRoutingModule,
 StoreModule.forRoot({}), 

 ScoreboardModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

參考文獻：

• ngrx.io/guide/store

本文作者：前端首席體驗師(CheongHu)

聯繫郵箱：[email protected]

閱讀更多 前端漫談 的文章

關鍵字: 存儲 狀態 瀏覽器