Ngrx store - delay tap after emitting action

Question

Using Ngrx store, I have the following 2 effects:

@Effect({ dispatch: false })
    toastSuccess$ = this.actions$
        .pipe(
            ofType(TOAST_SUCCESS),
            map((action: any) => this.toastr.success(action.payload, 'Success'))
        );

@Effect()
    appContextChanged$ = this.actions$
        .pipe(
            ofType(UPDATE_USER_APP_CONTEXT_SUCCESS),
            mergeMap(() => of(
                { type: TOAST_SUCCESS, payload: 'App context updated successfully!' })),
            tap(() => location.reload()),
            catchError(() => of({ type: UPDATE_USER_APP_CONTEXT_FAILED }))
        )

What I'd like to do is delay the tap location.reload() by a 1000ms (so the toast show for a second, then the page is refreshed), but I've tried using delay everywhere with no success. How can I delay the refreshing of the page, i.e. location.reload() after the toast effect?

Answer 1

Create a different effect for that, soappContextChanged$ can finish and notify your toastSuccess effect:

@Effect({dispatch: false})
reload$ = this.actions$
  .pipe(
    ofType(TOAST_SUCCESS),
    tap(() => location.reload())

It seems toastr.success returns an action, is that true? In that case, you can listen to that action instead of Toast_sucess in the ofType operator.