dispatch multiple actions in one effect

Question

I would like to dispatch two actions in one effect. Currently I have to declare two effects to achieve this :

// first effect
@Effect()
action1$ = this.actions$
  .ofType(CoreActionTypes.MY_ACTION)
  .map(res => {
    return { type: "ACTION_ONE"}
  })
  .catch(() => Observable.of({
    type: CoreActionTypes.MY_ACTION_FAILED
  }));

// second effect
@Effect()
action2$ = this.actions$
  .ofType(CoreActionTypes.MY_ACTION)
  .map(res => {
    return { type: "ACTION_TWO"}
  })
  .catch(() => Observable.of({
    type: CoreActionTypes.MY_ACTION_FAILED
  }));

Is it possible to have one action, be the source of two actions via a single effect?

FYI, with `catch` composed where it is in your effect, if an error occurs, the observable will complete and your effect will cease to work. See [this answer](http://stackoverflow.com/a/41685689/6680611). — cartant, Jan 17 '17 at 19:01

score 72 · Answer 1 · edited May 21 '18 at 11:27

72

@Effect()
loadInitConfig$ = this.actions$
    .ofType(layout.ActionTypes.LOAD_INIT_CONFIGURATION)
    .map<Action, void>(toPayload)
    .switchMap(() =>
        this.settingsService
            .loadInitConfiguration()
            .mergeMap((data: any) => [
                new layout.LoadInitConfigurationCompleteAction(data.settings),
                new meetup.LoadInitGeolocationCompleteAction(data.geolocation)
            ])
            .catch(error =>
                Observable.of(
                    new layout.LoadInitConfigurationFailAction({
                        error
                    })
                )
            )
    );

edited May 21 '18 at 11:27

Derek Hill

5,965
5
55
74

answered Apr 26 '17 at 01:51

Javier González

1,999
17
18

2

This one is really helpful! – Vasyl Apr 27 '18 at 07:53
How about the execute sequence these 2 actions processed by reducer? – Tethys Zhang Jan 13 '20 at 02:05
That's the first time I've seen `mergeMap` project function returning an array! Brilliant answer – Drenai Mar 17 '20 at 12:16
4

This is an anti pattern, according to Mike Ryan the co-founder of ngrx. https://twitter.com/MikeRyanDev/status/938108618133602304 – callback May 25 '20 at 09:09
1

hi, yes i know, but sometimes an anti-pattern it's not a bad solution – Javier González May 29 '20 at 19:03
1

This is opinionated, and sometimes it is totally fine to dispatch multiple actions from the same effect, if you know exactly what is affected. – Neurotransmitter Jun 30 '20 at 11:30
Returning multiple actions is a nono. Instead you should look into this eslint plugin how it should be done: https://github.com/timdeschryver/eslint-plugin-ngrx/blob/main/docs/rules/no-multiple-actions-in-effects.md – dewey Feb 09 '23 at 11:27

score 19 · Answer 2 · answered Jan 20 '17 at 07:47

You can use switchMap and Observable.of.

 @Effect({ dispatch: true }) action$ = this.actions$
    .ofType(CoreActionTypes.MY_ACTION)
    .switchMap(() => Observable.of(
        // subscribers will be notified
        {type: 'ACTION_ONE'} ,
        // subscribers will be notified (again ...)
        {type: 'ACTION_TWO'}
    ))
    .catch(() => Observable.of({
      type: CoreActionTypes.MY_ACTION_FAILED
    }));

Performance matters :

Instead of dispatching many actions that will trigger all the subscribers as many times as you dispatch, you may want to take a look into redux-batched-actions.

This allows you to warn your subscribers only when all of those multiple actions have been applied to the store.

For example :

@Effect({ dispatch: true }) action$ = this.actions$
    .ofType(CoreActionTypes.MY_ACTION)
    // subscribers will be notified only once, no matter how many actions you have
    // not between every action
    .map(() => batchActions([
        doThing(),
        doOther()
    ]))
    .catch(() => Observable.of({
      type: CoreActionTypes.MY_ACTION_FAILED
    }));

Thanks. How do I test the multiple returned actions ? – Lev Mar 10 '17 at 16:46 — Lev, Mar 10 '17 at 16:46

Yaremenko Andrii · Answer 3 · 2019-02-04T21:46:02.520

13

If anyone wonders how to mix plain actions with ones from Observables.

I was stuck with same task, but small difference: I needed to dispatch two actions, with second one after API call, which made it an Observable. Something like:

action1 is just an action: {type: 'ACTION_ONE'}
action2 is API call mapped to action: Observable<{type: 'ACTION_TWO'}>

Following code solved my issue:

@Effect() action$ = this.actions$.pipe(
    ofType(CoreActionTypes.MY_ACTION),
    mergeMap(res =>
        // in order to dispatch actions in provided order
        concat(
            of(action1),
            action2
        )
    ),
    catchError(() => Observable.of({
        type: CoreActionTypes.MY_ACTION_FAILED
    }))
);

concat doc's

edited Feb 04 '19 at 21:46

answered Feb 04 '19 at 14:17

Yaremenko Andrii

759
10
9

I was in a similar scenario and using `concat` did the work, thanks. My scenario: ` @Effect() action$ = this.actions$.pipe( ofType(CoreActionTypes.MY_ACTION), mergeMap( ( { payload } ) => this.dialog .open(DialogComponent) .afterClosed() .pipe( switchMap((resp) => concat( of( action1 ), action2 ) ) ) ) ); ` – Ricardo Fornes May 28 '20 at 14:15
Thanks, I suspected it's doable, but my rxjs knowledge was not strong enough. This worked perfectly – Alma Alma Jul 20 '20 at 11:41

score 6 · Answer 4 · answered Jan 17 '17 at 17:28

6

You can choose mergeMap for async or concatMap for sync

  @Effect() action$ = this.actions$
    .ofType(CoreActionTypes.MY_ACTION)
    .mergeMap(() => Observable.from([{type: "ACTION_ONE"} , {type: "ACTION_TWO"}]))
    .catch(() => Observable.of({
      type: CoreActionTypes.MY_ACTION_FAILED
    }));

answered Jan 17 '17 at 17:28

Victor Godoy

1,642
15
18

The main problem with this answer is a performance problem (which might just be acceptable) but also a consistency problem, which might be a big deal. If you split your actions and have a normalized state, dispatching 2 actions without using batched actions might end up into a store inconsistency and some selectors of your app might end up with errors. – maxime1992 Sep 20 '17 at 07:11

score 2 · Answer 5 · answered Feb 11 '17 at 06:22

you can also use .do() and store.next()

do allows you to attach a callback to the observable without affecting the other operators / changing the observable

e.g.

@Effect() action1$ = this.actions$
.ofType(CoreActionTypes.MY_ACTION)
.do(myaction => this.store.next( {type: 'ACTION_ONE'} ))
.switchMap((myaction) => Observable.of(
    {type: 'ACTION_TWO'}
))
.catch(() => Observable.of({
  type: CoreActionTypes.MY_ACTION_FAILED
}));

(you will need a reference to the store in your effects class)

Perfect. Thank you so much Jus. I'm learning this library and your example helped me fire multiple actions synchronously — Alex Fallenstedt, Nov 10 '17 at 19:58

Shashank Vivek · Answer 6 · 2020-04-03T05:03:21.060

1

How about using flatMap as below with ngrx 8.3.0 version syntax of effects and actions:

  someEffect$ = createEffect(() =>
    this.actions$.pipe(
      ofType(CoreActionTypes.MY_ACTION),
      flatMap((data) => [
        CoreActionTypes.MY_ACTION_2(data),
        CoreActionTypes.MY_ACTION_3(data),
      ])
    )
  );

edited Apr 03 '20 at 05:03

answered Mar 18 '20 at 08:15

Shashank Vivek

16,888
8
62
104

3

This is an anti pattern, according to Mike Ryan the co-founder of ngrx. https://twitter.com/MikeRyanDev/status/938108618133602304 – callback May 25 '20 at 09:10
1

@callback: Thanks for letting me know. I'll dig more into it. This practice was proposed by Victor Savkin in https://youtu.be/FQ6fzkHvCEY?t=1019 (splitter actions) – Shashank Vivek May 25 '20 at 17:38
isn't `of` operator required to wrap the multiple actions? – The.Wolfgang.Grimmer Nov 08 '20 at 14:56
`flatMap` has been deprecated, so can be achievable by `mergeMap` – Manoj Jun 23 '22 at 07:15

dispatch multiple actions in one effect

6 Answers6

Linked