@ngrx/effects
是 Angular 的一个库,用于处理 Redux 风格的状态管理中的副作用。在这个库中,你可以创建 effects 来监听 actions,并执行异步操作,比如 API 调用。如果你想要在一个 effect 中等待两个 actions 完成后再执行某些操作,你可以使用 RxJS 的操作符来实现。
以下是一个基本的示例,展示了如何在 @ngrx/effects
中等待两个 actions:
import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, map, mergeMap, withLatestFrom } from 'rxjs/operators';
import { Store } from '@ngrx/store';
import { ActionOne, ActionTwo, actionOneSuccess, actionTwoSuccess } from './actions';
@Injectable()
export class MyEffects {
constructor(
private actions$: Actions,
private store: Store<any>
) {}
// Effect to wait for ActionOne and ActionTwo to complete
myEffect$ = createEffect(() =>
this.actions$.pipe(
ofType(ActionOne, ActionTwo),
withLatestFrom(
this.store.select(state => state.actionOneCompleted), // Selector for ActionOne completion
this.store.select(state => state.actionTwoCompleted) // Selector for ActionTwo completion
),
filter(([action, actionOneDone, actionTwoDone]) => actionOneDone && actionTwoDone),
map(() => {
// Both actions are completed, perform your operation here
return { type: 'BOTH_ACTIONS_COMPLETED' };
}),
catchError(error => of({ type: 'ERROR_OCCURRED', payload: error }))
)
);
}
在这个例子中,withLatestFrom
操作符用于结合两个 observables:一个是 actions$
,它发出 ActionOne
或 ActionTwo
;另外两个是来自 store 的 selectors,它们分别检查 ActionOne
和 ActionTwo
是否已经完成。filter
操作符确保只有当两个 actions 都完成时,才会继续执行 effect。
请注意,这个例子假设你的 reducers 在 ActionOne
和 ActionTwo
成功后设置相应的完成状态。你需要根据你的实际应用逻辑来调整 selectors 和 action 类型。
如果你遇到了具体的问题,比如 effect 没有按预期工作,可能的原因包括:
解决这些问题通常需要检查你的 action creators、reducers 和 selectors 是否正确实现,并确保 effect 的逻辑与你的应用状态管理逻辑相匹配。
参考链接:
领取专属 10元无门槛券
手把手带您无忧上云