Как отправить несколько действий из эффекта в ngrx условно

Я back-end разработчик, начинающий с front-end разработки проекта, над которым я работаю. Интерфейс использует Angular7 и NgRx. Я много изучал за последние 4 дня, но вот кое-что, в чем я застрял, и был бы признателен за вашу помощь.

Я узнал, что мы можем отправлять несколько действий из эффекта в NgRx, возвращая массив Observable, имеющий несколько действий. Я хочу отправить одно из действий в массиве на основе условия.

Мой код выглядит примерно так

@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)
      );
    }),
   );

Я думаю, что мое незнание RxJs мешает мне реализовать условие.


rxjs rxjs-pipeable-operators ngrx ngrx-effects rxjs-observables
person Akash Sharma    schedule 24.11.2019    source источник
comment
Если вы новичок в Angular, добавление ngrx в микс - ужасная идея. Упростите жизнь с помощью хорошо спроектированных сервисов Angular.   -  person Adrian Brand    schedule 25.11.2019
comment
Это должно работать: [condition ? new Action() : new AnotherAction(), new Action2()]. Однако будьте осторожны, отправка нескольких действий не всегда может быть лучшим решением: stackoverflow.com/questions/42488283/   -  person Andrei Gătej    schedule 25.11.2019

Ответы (2)


arrow_upward
5
arrow_downward

Вы можете отправлять несколько действий или определенных действий, позволяя условным операторам определять, какую итерацию возвращать.

Я рекомендую вам прочитать: 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)
      );
    }),
   );
person Alex Fallenstedt    schedule 24.11.2019

arrow_upward
2
arrow_downward

Чтобы отправить несколько действий, вы можете передать массив действий, как показано ниже:

@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)))
      );
  })
);

Надеюсь, это поможет!

person Shivam Latawa    schedule 06.12.2019