(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：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

總結

以上是生活随笔為你收集整理的一个基于ngrx的计数器例子的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。