CODEWITHSUNDEEP
angularwebngxs
Victor Mazilu
Victor Mazilu

Reputation: 33

How to wait for two actions in NGXS

I am trying to execute some code after two actions completed in Angular using NGXS. The code would look something like this:

this._subscription.add(
      this._actions$
        .pipe(
          ofActionCompleted(Actions.action1),
          map(({ action1 }) => action1 as Actions.action1),
          ofActionCompleted(Actions.action2),
          map(({ action2 }) => action2 as Actions.action2)
        )
        .subscribe({
          next: ({ payload1, payload2 }) => {
              // execute code using payload1
              // execute code using payload2
          }
        })
    );

What would be the proper way to do this?

Upvotes: 2

Views: 1188

Answers (1)

Richard.Davenport
Richard.Davenport

Reputation: 1501

I would use zip to group both the actions:

zip(
  this.actions$.pipe(ofActionCompleted(Add)),
  this.actions$.pipe(ofActionCompleted(Add2))
).subscribe(([action1, action2]) => {
  console.log(action1);
  console.log(action2);
});

The idea being that you want both of the actions, not just either/or, at the same time.

Example: https://stackblitz.com/edit/ngxs-multi-actions?file=src/app/app.component.ts

Upvotes: 2

Related Questions