Angular 16独立应用中如何用provideState()提供多个根Reducer与Effects？

根Reducer配置 #

在独立应用的启动文件（通常是main.ts）中，用provideStore替代原StoreModule.forRoot，传入包含多个reducer的对象即可：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideStore } from '@ngrx/store';
import { AppComponent } from './app/app.component';
import { appReducer, anotherFeatureReducer } from './app/store';

bootstrapApplication(AppComponent, {
  providers: [
    provideStore({
      app: appReducer,
      anotherFeatureName: anotherFeatureReducer
    })
  ]
});

根Effects配置 #

使用provideEffects替代EffectsModule.forRoot，直接传入Effects类数组：

import { provideEffects } from '@ngrx/effects';
import { AppEffects, AnotherEffects } from './app/store/effects';

// 将该配置加入到bootstrapApplication的providers数组中
provideEffects([AppEffects, AnotherEffects])

状态读取undefined排查要点 #

• 检查reducer的初始状态是否正确定义，未设置初始状态是导致状态为undefined的常见原因
• 确认reducer和Effects的导入路径无误，避免因路径错误导致未注册成功
• 验证Effects类是否添加了@Injectable()装饰器，且内部依赖（如Actions）已正确注入

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