Chain Actions in an Effect in @ngrx

Question

I am having some trouble chaining actions one after the other in an Effect that makes an HTTP-request.

Here's the Effect code:

export class UserEffects {

    @Effect()
    update$: Observable<Action> = this.actions$.ofType(user.USERCHANGE).pipe(
        switchMap(data => this.authService.login(data['payload'])),
        map(userInfo => new UserChangedAction(userInfo)),
        tap(() => this.store.dispatch(
             new LoginStateChangeAction(localStorage.getItem('token')))
        )
    );

    constructor(private authService: AuthService, private actions$: Actions,
        public store: Store<fromRoot.State>) {}
}

The problem is both the actions are being called simultaneously. The LoginStateChange action depends on UserChanged action to complete.

How can I achieve this?

Thanks!

score 9 · Accepted Answer · answered Aug 13 '18 at 06:02

9

You can return multiple actions as explained in Austin's post: Dispatching Multiple Actions from NGRX Effects

@Effect()
update$ = this.actions$.ofType(user.USERCHANGE).pipe(
  switchMap(data => this.authService.login(data['payload'])),
  switchMap(userInfo => [
    new UserChangedAction(userInfo),
    new LoginStateChangeAction(localStorage.getItem('token')),
  ])
);

answered Aug 13 '18 at 06:02

timdeschryver

14,415
1
19
32

I guess I didn't try enough. I think this is going to work. I'll test and accept if it does, soon. – Tanmay Aug 13 '18 at 12:50
And then, is there a way to do something inside lets say "tap" operator, after both new UserChangedAction(userInfo), new LoginStateChangeAction(localStorage.getItem('token')), completes? – Marek Oct 07 '20 at 13:23

score 0 · Answer 2 · answered Aug 13 '18 at 07:30

0

You can try such combination - UserChangedAction.switchMapTo(LoginStateChangeAction).pipe(stuff). It will wait for UserChangedAction emit and pnly after that will wait for LoginStateChangeAction emit. So it will be one by one.

answered Aug 13 '18 at 07:30

dsych

754
7
13

Chain Actions in an Effect in @ngrx

2 Answers2

Linked