本文選擇了 Angular 團隊提供的官方 Heroes Angular 應用程式作為起始應用程式來展示 Angular 的特性。

為了展示 ngrx/store 模組在處理 Angular Feature 模組方面的強大功能，我不得不透過引入一個名為 Heroes 的新 Feature 模組來重構一些 Heroes 應用程式。該模組現在包含所有與 Hero 相關的程式碼和元件。您可以透過以下連結檢查與 ngrx/store 模組整合的最終 Heroes 應用程式：https://stackblitz.com/edit/angular-tour-of-heroes-example。

重構後的工程如下圖所示：

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

- @ngrx/store: @ngrx/store 包代表主要的 NgRX 儲存包。
- @ngrx/store-devtools：@ngrx/store-devtools 包有助於檢測 Store，讓您可以使用著名的 Redux DevTools Chrome 擴充套件來除錯應用程式
- @ngrx/effect：@ngrx/effects 包處理在應用程式中使用 ngrx/store 模組的 effect，即向遠端伺服器發起的資料讀寫請求
- @ngrx/router-store：@ngrx/router-store 包將 Angular 路由器與 ngrx/store 模組整合在一起。 Store 代表一個應用程式的 single source of truth，因此，在這個 Node 包的幫助下，Store 可以訪問與路由器相關的資訊

將上述開發包匯入 Angular 應用：

```typescript

import { StoreModule, MetaReducer } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { storeFreeze} from 'ngrx-store-freeze';

import {
    StoreRouterConnectingModule,
    RouterStateSerializer
} from '@ngrx/router-store';

import {
    AppState,
    reducers,
    CustomSerializer,
    effects
} from './store';

export const metaReducers: MetaReducer<any>[] = !environment.production ? [storeFreeze] : [];

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

@NgModule({
    imports: [
        ...
        StoreModule.forRoot((reducers) as any, { metaReducers }), EffectsModule.forRoot(effects),
            storeDevTools,
            ...
    ],
    ...

```
MetaReducer 型別表示更高階的 reducer。 reducer 充當純函式，因此 MetaReducer 代表更高階的函式。 根據定義，高階函式表示接受的輸入引數型別是函式，返回的值是另一個函式的函式。

MetaReducer 型別接受一個 reducer 作為輸入引數，並返回一個與 reducer 簽名完全相同的函式。 ngrx/store 模組在內部組合了所有提供的減速器，並用提供的 meta 減速器包裝它們。 ngrx/store 模組保證 meta-reducer 函式在實際 reducer 之前首先執行。</any>

什麼是 Angular Ngrx Store 裡的 Meta-Reducer

相關文章