如何使用 Angular 17 独立版注册 NGRX ProvideEffects？

Question

我是 Angular 17 的新手，关于如何将 NGRX 与新的独立模块或组件一起使用的文档非常有限。

我已经安装了ngrx效果：

npm install @ngrx/effects

但现在因为我的应用程序没有 app.modules.ts 文件，我很难使用我的效果。这是我的 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()]
};

https://ngrx.io/api/effects/provideEffects

这是我尝试使用的效果：

@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) {}
}

在provideEffects中，他们给出了如何将其与路由器上的功能一起使用的示例，但我不确定如何做到这一点？

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

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

如何在 Angular 17 独立版本中注册 NGRX ProvideEffects？

Answer 1

尝试创建单独的 app.effects 模块并尝试将其添加到 main.ts 文件中。 请参考以下代码：

app.effects.module.ts：

import { NgModule } from '@angular/core';
import { EffectsModule } from '@ngrx/effects';
import { AppEffects } from './app.effects'; // Import your effects

@NgModule({
  imports: [
    EffectsModule.forRoot([AppEffects]),
  ],
})
export class AppEffectsModule { }

在你的app.effects.ts中：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { EMPTY } from 'rxjs';
import { mergeMap, catchError, map } from 'rxjs/operators';
import * as MyActions from './my-actions'; // Import your actions

@Injectable()
export class AppEffects {
  loadSomething$ = createEffect(() => this.actions$.pipe(
    ofType(MyActions.loadSomething),
    mergeMap(() => this.myService.getData()
      .pipe(
        map(data => MyActions.loadSomethingSuccess({ data })),
        catchError(() => EMPTY)
      )
    )
  ));

  constructor(
    private actions$: Actions,
    private myService: MyService // Replace with your service
  ) {}
}

在你的 main.ts 中：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module'; // Import your actual module
import { environment } from './environments/environment';
import { AppEffectsModule } from './app.effects.module'; // Import your effects module

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));


AppEffectsModule; // Make sure to import and include it  module