angularjs 如何将NGRX provideEffects与Angular 17独立注册？

xzabzqsa 于 6个月前发布在 Angular

关注(0)|答案(2)|浏览(73)

我是Angular 17的新手，关于如何将NGRX与新的独立模块或组件一起使用的文档非常有限。
我已经安装了ngrx效果：

npm install @ngrx/effects

字符串
但是现在，因为我的应用程序没有app.modules.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 },
];

型
如何将NGRX provideEffects与Angular 17独立注册？

angularjs

来源：https://stackoverflow.com/questions/77624442/how-do-i-register-ngrx-provideeffects-with-angular-17-standalone

2条答案

按热度按时间

6yjfywim1#

尝试创建单独的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

型

赞(0）回复(0）举报 6个月前

dojqjjoe2#

像这样做：

export const routes: Routes = [
  {
    path: 'priority',
    component: PrioritiesComponent,
    providers: [provideState(YourFeatureState), provideEffects([PrioritiesEffects])],
  },
];

赞(0）回复(0）举报 6个月前

我来回答

angularjs 如何将NGRX provideEffects与Angular 17独立注册？

2条答案

相关问题

热门标签

最新问答