Dispatch actions in order within effect

Question

I am unable to get two actions to execute sequentially within a NGRX effect.

Here are the effects

registerFinishSave$ = createEffect(
        () => this.actions$.pipe(
            ofType(registerFinishSave),
            withLatestFrom(
                this.store.select(selectRouteState),
                (action, state) => ({
                    firstName: action.request.firstName,
                    id: state.queryParams.id,
                    lastName: action.request.lastName,
                    password: action.request.password,
                    repeatPassword: action.request.repeatPassword,
                    token: state.queryParams.token,
                    userName: action.request.userName
                })),
            switchMap((request) =>
                this.accountService.updateAndVerifyAccount(request).pipe(
                    mergeMap((response: any) => from([registerFinishSaveSuccess({ response }), loginSuccess({response})])),
                    // map((response: any) => registerFinishSaveSuccess({ response })),
                    catchError((response: HttpErrorResponse) => {
                        if (response.status === 400) {
                            return of(registerFinishSaveFailure({ response }));
                        }
                        throw response;
                    })
                )
            )
        )
    );

registerFinishSaveSuccess$ = createEffect(
        () => this.actions$.pipe(
            ofType(registerFinishSaveSuccess),
            tap(({ response }) => {
                console.log('registerFinishSaveSuccess ');
                // this.router.navigate(['/']);
                this.notificationService.info(response.message);
            })
        ), {
            dispatch: false
        }
    );

loginSuccess$ = createEffect(
    () => this.actions$.pipe(
      ofType(loginSuccess),
      tap(() => {
        console.log('loginSuccess ');
        return this.router.navigate(['/']);
      })
    ), {
      dispatch: false
    }
  );

Here are the reducers

  on<AuthenticationState>(loginSuccess, (state: AuthenticationState, { response }) => ({
    ...state, accessToken: response.accessToken, displayName: response.displayName, id: response.id, isAuthenticated: true, refreshToken: response.refreshToken
  })),

on<AccountState>(registerFinishSaveSuccess, (state: AccountState, { response }) => ({
        ...state, message: null
    })),

The action and effect for registerFinishSaveSuccess appears to work. The reducer appears to set the state for the action loginSuccess. However the effect loginSuccess does not appear to fire.

I need to fire the registerFinishSaveSuccess and loginSuccess actions and their effects sequentially. Not sure if the code below is correct

''' mergeMap((response: any) => from([registerFinishSaveSuccess({ response }), loginSuccess({response})])), '''

ukn ukn · Accepted Answer · 2019-07-11T19:50:22

There is no need to dispatch both in a mergeMap. You can dispatch your registerFinishSaveSuccess and then his effect would be triggered. In the registerFinishSaveSuccess effect, you can dispatch loginSuccess and that way you would be sure the order is kept.

Dispatch actions in order within effect

1 Answers