How can I return multiple actions from a nested rxjs operator

Question

I'm having trouble dispatching multiple actions in the following effect:

    @Effect()
    someEffect$ = this.actions$.pipe(
      ofType(someAction: Actions),
      mergeMap(
        (action)=>{
          return this.authService.getProfile(action.payload.authInfo).pipe(
              map((response: any) => {

                  if (response.isErrorResponse) {
                    return new HeaderActions.AuthFail(response);
                  } else {

                 //here i'd like to return multiple actions
                    return [
                      new HeaderActions.FetchMPInfoSuccess(this.fetchMpInfoSuccesState(getMpProfileResponse)),
                      new HeaderActions.GetAccountStates(true)
                  ]
                  }
              }),
              catchError((error:HttpErrorResponse )=>{
                return of(new HeaderActions.AuthFail(response));
              })
            );
        }
      )
    );

I've tried adding an array of actions, in the return block, but that's giving an error that im not sending a valid action, any idea what i'm doing wrong?

that's not working ← See "It's not working" is not helpful, specifically point 3 and 4. — Igor
1. if (response.isErrorResponse) ← that should not have to be checked here, make sure you are building restful APIs that return error status codes on failure. 2. The additional actions you want to execute should not be started in map, use switchMap instead and you can execute the actions simultaneously using forkJoin — Igor
You can take the parts of my comment and search on them and try to alter your code accordingly. — Igor

Miroslav Maksimovic Miroslav Maksimovic · Accepted Answer · 2019-10-24T07:31:59

You can use switchMap instead of mergeMap. Then use flatMap or switchMap instead of map.

The code should be like this:

@Effect()
someEffect$ = this.actions$.pipe(
  ofType(someAction: Actions),
  switchMap(
    (action)=>{
      return this.authService.getProfile(action.payload.authInfo).pipe(
          flatMap((response: any) => {

              if (response.isErrorResponse) {
                return new HeaderActions.AuthFail(response);
              } else {

             //here i'd like to return multiple actions
                return [
                  new HeaderActions.FetchMPInfoSuccess(this.fetchMpInfoSuccesState(getMpProfileResponse)),
                  new HeaderActions.GetAccountStates(true)
              ]
              }
          }),
          catchError((error:HttpErrorResponse )=>{
            return of(new HeaderActions.AuthFail(response));
          })
        );
    }
  )
);

To access data in your child component you can use this approach with @Input() set stuff:

@Input() set(data: any) {
if (data) { console.log(data) }}

The data in html will be there always.

Map modifies each item emitted by a source Observable and emits the modified item.

FlatMap, SwitchMap also applies a function on each emitted item but instead of returning the modified item, it returns the Observable itself which can emit data again.

FlatMap merge items emitted by multiple Observables and returns a single Observable.

SwitchMap is a bit different from FlatMap. SwitchMap unsubscribes from the previous source Observable whenever new item started emitting, thus always emitting the items from current Observable.

If you would like to know more about rxjs operators, please have a look here.

How can I return multiple actions from a nested rxjs operator

2 Answers