Dispatching Multiple Actions from NGRX Effects

If your like me, you might have some code that looks like:

@Effect() save = this.update$.pipe(
   map(action => action.payload),
   switchMap(payload => this.myService.save(payload)),
   tap(res => this.store.dispatch(new Notification('save success'))),
   map(res => new SaveSuccess(res))
);

In this example, I need to do 2 actions in a single effect but @Effect expects us to return a new action.

How do we solve this? Lets break out switchMap to return a new observable array with multiple actions!

@Effect() save = this.update$.pipe(
   map(action => action.payload),
   switchMap(payload => this.myService.save(payload)),
   switchMap(res => [
       new Notification('save success'),
       new SaveSuccess(res)
   ])
);

Boom! Just like we can return multiple actions from a single effect!

I’m #ngPanda

I hope you enjoyed the post, if you liked it follow me on Twitter and Github for more JavaScript tips/opinions/projects/articles/etc!