我們可以使用 Meta Reducer 即高階 Reducer 的概念。

下面是一個典型的例子：Logger Meta Reducer.

該高階 Reducer 在真實的歸約器執行之前新增一些日誌訊息：

```typescript
export function logger(reducer:
    ActionReducer<appstate>): ActionReducer<appstate> {
        return (state: AppState, action: any): AppState => {
            console.log('state', state);
            console.log('action', action);
            return reducer(state, action);
        };
    }
```
logger 的輸入是一個 reducer，返回一個新的與輸入的 reducer 具有完全相同的簽名的新 reducer，且在這個新的 reducer 裡，會首先執行日誌記錄操作。這有點像 Java 裡的面向切片程式設計技術(AOP).

所示的 logger() 元歸約器函式接受 ActionReducer 型別的輸入引數（即純函式或歸約器），並且還返回 ActionReducer 型別的函式。 返回的函式在返回包裝的減速器之前將狀態和操作變數記錄到控制檯。

回到 App Module 程式碼，定義一組 ModuleWithProviders 類來包裝 StoreDevtoolsModule.instrument() 方法，以便稍後在 App Module 上匯入它。

```typescript
export const storeDevTools:
ModuleWithProviders[] =
    !environment.production ? [StoreDevtoolsModule.instrument()] : [];

```
最後，將上述的 ModuleWithProviders 匯入 App Module：

```typescript
StoreModule.forRoot((reducers) as any,
        { metaReducers }),

EffectsModule.forRoot(effects),

storeDevTools,
```
實際上，StoreModule.forRoot() 方法還可以接收第二個引數，型別為 StoreConfig interface：

```typescript
export declare type StoreConfig<t v="" extends="" action="http://blog.itpub.net/24475491/viewspace-2907285/Action"> = {
        initialState?: InitialState<t>;
        reducerFactory?: ActionReducerFactory<t v="">;
        metaReducers?: MetaReducer<t v="">[];
```

# Store Side-Effect

將 Action 分派到 Store 的程式碼有時會導致一些副作用(Side Effect)。 例如，排程一個動作來將所有Hero 資料載入到應用程式中。 這樣的操作會導致必須透過 Angular 服務與託管在伺服器端（或雲）上的 Web API 進行通訊以返回英雄資料的 Side-Effect。 將操作分派到 Store 的程式碼的這種 Side-Effect，會導致與外部服務的通訊。

Ngrx/effects 模組將副作用與容器元件隔離開來，並提供了一個簡潔的解決方案來在支援 NgRX Store 的 Angular 應用程式中處理它們。 Ngrx/store 模組向 Store 傳送一個操作，以傳遞從伺服器檢索到的任何結果或資料。

![](https://img-blog.csdnimg.cn/img_convert/e429c76b3f81ba46f3481fdb0f5a9ed2.png)

上圖的互動場景概述如下：

- ngrx/effects 模組監聽分發到 Store 的動作。
- 如果有一個 Effect 被鉤住來監聽一個分派的動作，這個 Effect 就會執行並執行。
- 一旦 Effect 從伺服器端接收到資料，它就會向 Store 傳送一個新的 action，以便 reducer 啟動並處理從 Effect 接收到的資料並相應地更新狀態。</t></t></t></t></appstate></appstate>

Angular Ngrx Store Effect 和 Action 的互動流程

相關文章