ngrx dispatch same action multiple times from effect

Question

I have a fairly simple problem, but cannot figure out what I am doing wrong - none of the solutions I found online seem to work for me:

On opening a certain part of my app, an action is dispatched to Load the current list of item-Ids from the backend.

Once this list is retrieved - I need to load all items that I just got the id for.

( GET /api/items -> [1,2] -> GET /api/items/1, GET /api/items/2)

I tried to solve this with an effect like this:

I opted for mergeMap, because I want to emit an array of actions, but do not care for their sequence.

doing it like this

@Effect() loadList$: Observable<LoadAction[]> = this.actions$.pipe(
    ofType<LoadListAction>(LOAD_LIST_ACTION),
    mergeMap( _ =>
      this.backendService.getItemIds().pipe(
        filter( it => it.items.length > 0),
        map(response => response.items.map(it => new LoadAction(it.id));
        )
      )
    )
  );

gives me this error:

"invalid action was dispatched" [{"type":"[ITEMS][INIT] load item", "payload":"1"}, {"type":"[ITEMS][INIT] load item", "payload":"2"}],
 TypeError: Actions must have a type property

which makes sense, as the observable now directly emits the array, so I switched to two times mergeMap:

@Effect() loadList$: Observable<LoadAction[]> = this.actions$.pipe(
    ofType<LoadListAction>(LOAD_LIST_ACTION),
    mergeMap( _ =>
      this.backendService.getItemIds().pipe(
        filter( it => it.items.length > 0),
        mergeMap(response => response.items.map(it => new LoadAction(it.id));
        )
      )
    )
  );

here just the last action reaches the reducer (/api/items/2), the first action vanishes and never takes effect. (I verified, the list has a length of 2).

What is the problem here?

Nebex Elias Nebex Elias · Accepted Answer · 2020-07-29T11:20:20

Make sure the Action.type is different for the two actions, in my case, I accidentally set type to be identical in the two different actions. I had a hard time debugging it but finally I was able to find the problem.

ngrx dispatch same action multiple times from effect

1 Answers