Question

我是一个后端开发人员，从我正在进行的项目的前端开发开始。前端使用Angular7和NgRx。在过去的4天里，我学习了很多东西，但是有一些问题值得我坚持，

我了解到，我们可以通过返回具有多个动作的Observable数组，从NgRx中的一个效果调度多个动作。我想根据条件在数组中分派其中一个动作。

我的代码看起来像这样

@Effect()
  something$: Observable<Action> = this.actions$.pipe(
    ofType(ActionType),
    switchMap.(action: any) => {
       return service.call(action.payload)
         .pipe(
             switchMap((data: ReturnType) => [ 
                new Action1(),
                new Action2(),
              ]),
        catchError(error handling)
      );
    }),
   );

我想实现这样的目标

   @Effect()
  something$: Observable<Action> = this.actions$.pipe(
    ofType(ActionType),
    switchMap.(action: any) => {
       return service.call(action.payload)
         .pipe(
             switchMap((data: ReturnType) => [ 
                 if(condition)
                   new Action1()
                  else
                    new Action1.1() ,
                new Action2(),
              ]),
        catchError(error handling)
      );
    }),
   );

我认为这是我对RxJ的了解不足，这使我无法执行该条件。

Answer 1

您可以通过让有条件的if确定返回的迭代次数来调度多个动作或特定动作

我建议您阅读：https://www.learnrxjs.io/operators/transformation/switchmap.html

  @Effect()
  something$: Observable<Action> = this.actions$.pipe(
    ofType(ActionType),
    switchMap.(action: any) => {
       return service.call(action.payload)
         .pipe(
             switchMap((data: ReturnType) => {
                 let actionsToDispatch = [];
                 if(condition) {
                   actionsToDispatch.push(new SomeAction())
                 } else {
                   actionsToDispatch.push(new SomeOtherAction())
                 }
                 return actionsToDispatch
              }),
              catchError(error handling)
      );
    }),
   );

Answer 2

要调度多个动作，您可以如下所示传递动作数组：

@Effect()
getTodos$ = this.actions$.ofType(todoActions.LOAD_TODOS).pipe(
  switchMap(() => {
    return this.todoService
      .getTodos()
      .pipe(
        switchMap(todos => [
          new todoActions.LoadTodosSuccess(todos),
          new todoActions.ShowAnimation()
        ]),
        catchError(error => of(new todoActions.LoadTodosFail(error)))
      );
  })
);

要有条件地分派操作，可以将操作包装在if / else中，如下所示：

@Effect()
getTodos$ = this.actions$.ofType(todoActions.LOAD_TODOS).pipe(
  switchMap(() => {
    return this.todoService
      .getTodos()
      .pipe(
        switchMap(todos => {
         if(true) {
             return new todoActions.LoadTodosSuccess(todos),
         } else {
            return new todoActions.ShowAnimation()
         }),
        catchError(error => of(new todoActions.LoadTodosFail(error)))
      );
  })
);

希望有帮助！

如何有条件地从ngrx中的一个效果分派多个动作

2 个答案: