NgRx EffectsModule 是 Angular 应用中使用 NgRx 状态管理库时,用于处理副作用(side effects)的一个模块。它允许你以声明式的方式定义副作用,这些副作用通常涉及异步操作,如 HTTP 请求或定时任务。
首先,确保你已经安装了 NgRx 和 RxJS:
npm install @ngrx/store @ngrx/effects rxjs
然后,在你的 Angular 模块中导入 EffectsModule
:
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { MyEffectService } from './my-effect.service';
@NgModule({
imports: [
StoreModule.forRoot({ /* your reducers here */ }),
EffectsModule.forRoot([MyEffectService])
],
providers: [MyEffectService]
})
export class AppModule { }
接下来,创建一个 Effect 服务:
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap } from 'rxjs/operators';
import { MyService } from './my.service';
import { loadItems, loadItemsSuccess, loadItemsFailure } from './my.actions';
@Injectable()
export class MyEffectService {
loadItems$ = createEffect(() =>
this.actions$.pipe(
ofType(loadItems),
mergeMap(() =>
this.myService.getItems().pipe(
map(items => loadItemsSuccess({ items })),
catchError(() => of(loadItemsFailure()))
)
)
)
);
constructor(
private actions$: Actions,
private myService: MyService
) {}
}
在这个例子中,loadItems$
是一个 Effect,它监听 loadItems
动作,并在触发时执行异步操作。
imports
数组中正确导入了 EffectsModule.forRoot([MyEffectService])
。catchError
操作符来处理异步操作失败的情况,并返回适当的错误动作。通过遵循这些步骤和注意事项,你应该能够成功地在 Angular 应用中使用 NgRx EffectsModule 来处理副作用。
领取专属 10元无门槛券
手把手带您无忧上云