一個基于ngrx的計數器例子

(1) 定義action

從@ngrx/store導入Action，建立一個Action的子類：

(2) 實作reducer，根據不同的action type，傳回不同的store

store要存儲的業務資料也定義在reducer裡，當然也可以在單獨的State.ts檔案裡實作：

reducer函數就是一個有限狀态機，根據目前的狀态和傳入的action類型，傳回新的狀态：

有了action和reducer，應用程式還無法直接消費，需要通過Selector暴露。

import {createFeatureSelector, createSelector} from '@ngrx/store';      

首先建立一個MemoizedSelector， 使用API createFeatureSelector：

export const getExampleState = createFeatureSelector<State>('example');      

傳入的類型參數為實際的業務資料類型，傳入一個字元串作為selector的名稱。

如果想通過state拿到具體的業務資料，調用createSelector，傳入之前的FeatureSelector，以及一個map函數，該函數輸入是一個state，輸出是state包含的具體業務資料字段。

// 參數1：所有頁面資料的一個抽象
// 參數2：如何通過state拿到包裹的業務資料
// 這算是Counter State的一個抽象，可以近似了解成頁面資料State的一個子集
// 注意，這裡的state.counter還不是具體的number，而是fromCounter.State，即: counter: fromCounter.State; 而fromCounter.State的定義：
/*
export interface State {
  counter: number;
}
*/
export const getCounterState = createSelector(getExampleState, (state: State) => state.counter);
      

還可以像搭積木一樣，将createSelector傳回的MemoizedSelector傳給新的createSelector，像拼樂高一樣構造出新的selector：

// 這個函數最後要傳給store.select, 作為一個map function
/*
    輸入1：某個具體的State，比如CounterState
    輸入2：如何根據State拿到具體的值
    // select<K>(mapFn: (state: T) => K): Observable<K>;
    this.counter$ = store.select(fromExample.getCounterCounter);
*/
export const getCounterCounter = createSelector(getCounterState, fromCounter.getCounter);      

(3) 應用程式的定義：

這個counter的指派邏輯：

(1) 使用構造函數注入一個Store對象，類型參數為具體的業務資料結構

(2) 使用之前調用createSelector得到的selector，作為輸入參數，傳入到store對象的

select方法裡。

最後在頁面裡直接用$counter | async就可以顯示目前的counter值了。

當然對counter的修改不能直接使用selector，實際上selector提供的隻有讀取方法；而是用store的dispatch方法，傳入新的action來間接實作store裡的資料修改動作。

最後一個步驟，在app module裡從@ngrx/store導入StoreModule:

然後使用StoreModule.forFeature方法傳回一個ModuleWithProviders：