如何在Angular 17独立项目中注册NGRX provideEffects？

问题背景 #

我是Angular 17新手，目前关于在新的独立模块或组件中使用NGRX的文档十分有限。我已安装ngrx effects：

npm install @ngrx/effects

但由于我的应用没有app.modules.ts文件，无法正常使用自定义的Effects。我的app.config.ts代码如下：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideStore } from '@ngrx/store';
import { reducers, metaReducers } from './reducers';
import { provideEffects } from '@ngrx/effects';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideStore(reducers, { metaReducers }), provideEffects()]
};

我想要使用的自定义Effects代码如下：

@Injectable()
export class PrioritiesEffects {
  getPriorities$ = createEffect(() =>
    this.actions$.pipe(
      ofType(PrioritiesActions.getPriorities),
      mergeMap(() => {
        return this.prioritiesService.getPriorities().pipe(
          map((priorities) => PrioritiesActions.getPrioritiesSuccess({ priorities })),
          catchError((error) =>
            of(PrioritiesActions.getPrioritiesFailure({ error: error.message }))
          )
        );
      })
    )
  );

  constructor(private actions$: Actions, private prioritiesService: PrioritiesService) {}
}

文档中给出了在路由中结合feature使用provideEffects的示例，但我不清楚具体操作方法。我的路由代码如下：

import { Routes } from '@angular/router';
import { PrioritiesComponent } from './priorities/priorities.component';

export const routes: Routes = [
  { path: 'priority', component: PrioritiesComponent },
];

请问如何在Angular 17独立项目中注册NGRX provideEffects？

解决方案 #

方法1：全局注册Effects #

直接在app.config.ts的provideEffects中传入你的自定义Effects类即可：

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideStore } from '@ngrx/store';
import { reducers, metaReducers } from './reducers';
import { provideEffects } from '@ngrx/effects';
// 导入你的Effects类
import { PrioritiesEffects } from './path/to/priorities.effects';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideStore(reducers, { metaReducers }),
    // 传入Effects类数组
    provideEffects([PrioritiesEffects])
  ]
};

方法2：路由懒加载时注册Feature级Effects #

如果Priorities是独立的feature模块，希望访问对应路由时才加载Effects，可以通过路由的providers配置实现：

1. 修改路由配置，为priority路由添加专属的providers：

import { Routes } from '@angular/router';
import { PrioritiesComponent } from './priorities/priorities.component';
import { provideEffects } from '@ngrx/effects';
import { PrioritiesEffects } from './path/to/priorities.effects';

export const routes: Routes = [
  { 
    path: 'priority', 
    component: PrioritiesComponent,
    // 在此注册该路由专属的Effects
    providers: [provideEffects([PrioritiesEffects])]
  },
];

2. 确保PrioritiesEffects的依赖（比如PrioritiesService）已正确提供：可以给服务添加@Injectable({ providedIn: 'root' })使其全局可用，或者也在路由的providers数组中注册该服务。

内容的提问来源于stack exchange，提问作者Kyle Corbin Hurst