开发模式（ng serve）下用模拟数据初始化NGRX Store的最佳实践

针对开发环境下自动用JSON模拟数据填充NGRX Store的需求，推荐以下几种无侵入、易维护的实现方案，彻底避免手动注释/取消注释的繁琐操作：

方案一：利用APP_INITIALIZER在应用启动时加载并分发数据 #

这种方式能确保模拟数据在组件渲染前就填充到Store，适合需要初始状态就绪的场景。

步骤1：配置环境开关 #

在开发环境配置文件中添加专属开关，生产环境默认关闭：

// src/environments/environment.ts
export const environment = {
  production: false,
  loadMockDataOnInit: true // 开发环境开启
};

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  loadMockDataOnInit: false // 生产环境关闭
};

步骤2：创建模拟数据加载服务 #

负责读取JSON文件并将数据分发到Store：

// src/app/services/mock-loader.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Store } from '@ngrx/store';
// 替换为你的实际action
import { populateProducts } from '../store/products/products.actions';

@Injectable({ providedIn: 'root' })
export class MockLoaderService {
  constructor(private http: HttpClient, private store: Store) {}

  loadMockData(): Promise<void> {
    return this.http.get('/assets/mock-products.json')
      .toPromise()
      .then(mockData => {
        // 分发action到Store更新状态
        this.store.dispatch(populateProducts({ products: mockData }));
      })
      .catch(() => Promise.resolve()); // 加载失败不阻塞应用启动
  }
}

步骤3：注册APP_INITIALIZER #

在AppModule中注册初始化钩子，根据环境开关决定是否加载模拟数据：

// src/app/app.module.ts
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { environment } from '../environments/environment';
import { MockLoaderService } from './services/mock-loader.service';

// 初始化工厂函数
export function mockDataInitFactory(loader: MockLoaderService) {
  return () => {
    if (environment.loadMockDataOnInit) {
      return loader.loadMockData();
    }
    return Promise.resolve();
  };
}

@NgModule({
  // ... 其他模块、组件配置
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: mockDataInitFactory,
      deps: [MockLoaderService],
      multi: true
    }
  ]
})
export class AppModule {}

方案二：通过Meta Reducer预注入初始状态 #

如果模拟数据完全对应Store的初始状态结构，可以直接通过Meta Reducer在Store初始化时合并模拟数据，性能更优。

步骤1：创建Mock Meta Reducer #

// src/app/store/meta-reducers/mock.meta-reducer.ts
import { ActionReducer, MetaReducer } from '@ngrx/store';
import { environment } from '../../environments/environment';
// 直接导入本地JSON文件（需确保tsconfig.json允许导入JSON）
import mockInitialState from '../../assets/mock-initial-state.json';

export function mockMetaReducer(reducer: ActionReducer<any>): ActionReducer<any> {
  return (state, action) => {
    // 仅在Store初始化为undefined时注入模拟状态
    if (state === undefined && environment.loadMockDataOnInit) {
      return { ...state, ...mockInitialState };
    }
    return reducer(state, action);
  };
}

// 根据环境开关决定是否启用该Meta Reducer
export const metaReducers: MetaReducer<any>[] = environment.loadMockDataOnInit ? [mockMetaReducer] : [];

步骤2：配置Store时引入Meta Reducer #

// src/app/store/app-store.module.ts
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { reducers } from './reducers';
import { metaReducers } from './meta-reducers/mock.meta-reducer';

@NgModule({
  imports: [
    StoreModule.forRoot(reducers, { metaReducers })
  ]
})
export class AppStoreModule {}

关键注意事项 #

• 状态结构匹配：确保模拟JSON的结构和Store的状态树完全一致，避免出现状态异常。
• 生产环境校验：可以在CI/CD流程中添加检查，确保生产环境的loadMockDataOnInit始终为false。
• 大文件优化：如果模拟数据体积较大，方案一的APP_INITIALIZER可能会延迟应用启动，此时可以改为在路由守卫中加载，或者针对惰性加载模块单独填充对应状态。
• 错误处理：模拟数据加载失败时，不要阻塞应用启动，确保开发流程不受影响。

内容的提问来源于stack exchange，提问作者williamlee