首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在@ngrx/effects中等待2个动作

@ngrx/effects 是 Angular 的一个库,用于处理 Redux 风格的状态管理中的副作用。在这个库中,你可以创建 effects 来监听 actions,并执行异步操作,比如 API 调用。如果你想要在一个 effect 中等待两个 actions 完成后再执行某些操作,你可以使用 RxJS 的操作符来实现。

以下是一个基本的示例,展示了如何在 @ngrx/effects 中等待两个 actions:

代码语言:txt
复制
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$,它发出 ActionOneActionTwo;另外两个是来自 store 的 selectors,它们分别检查 ActionOneActionTwo 是否已经完成。filter 操作符确保只有当两个 actions 都完成时,才会继续执行 effect。

请注意,这个例子假设你的 reducers 在 ActionOneActionTwo 成功后设置相应的完成状态。你需要根据你的实际应用逻辑来调整 selectors 和 action 类型。

如果你遇到了具体的问题,比如 effect 没有按预期工作,可能的原因包括:

  1. Selectors 没有正确地从 store 中获取状态。
  2. Action types 不匹配或者没有正确地触发。
  3. Effect 中的操作符使用不当。

解决这些问题通常需要检查你的 action creators、reducers 和 selectors 是否正确实现,并确保 effect 的逻辑与你的应用状态管理逻辑相匹配。

参考链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券