angular - Dispatch multiply actions in order in effect - ngrx

Question

I'm wondering how I dispatch multiply actions in order in my effect.

  @Effect()
  getClients$: Observable<Action> = this.actions$
    .ofType(ClientActions.GET_CLIENTS)
    .withLatestFrom(this.store.select(fromRoot.getClients))
    .filter(([action, clients]) => clients.length === 0)
    .map(action => new LayoutActions.IsLoading(true))
    .switchMap(() => this.clientService.getClients())
    .map(clients => new ClientActions.GetClientsReceived(clients));

In the above example the first action is not dispatched. The getClients() method and last action are working correctly.

Answer 1

Every action emitted by your observable will be dispatched so what you need is map an action to multiple actions. You can do that by adding the loading action with startWith() on your switchMap() :

.switchMap(action => {
  this.clientService.getClients()
    .map(clients => new ClientActions.GetClientsReceived(clients) as Action)
    .startWith(new LayoutActions.IsLoading(true))
);

Sometimes typings can be wrong, typescript will use the specific type of your action instead of Action. In this case after the map, the Observable is typed as Observable<ClientActionReceived> so returning a LayoutActionLoading inside startWith seems wrong for typescript.
To avoid that you need to cast one of the two as Action so it'll know it's an Observable<Action>.

Answer 2

You can use the do operator.

Example: .do(dispatchAction(...))

Answer 3

i am doing it like that:

userRoleChange$: Observable<Action> = this.actions$
 .ofType(userActions.USER_SWITCH_ROLE)
 .switchMap(() => Observable.of(
   {type: preFlightActions.PRE_FLIGHT_CLEAR, payload: {}},
   {type: detailPlanningActions.DETAIL_PLANNING_CLEAR, payload: {}},
   {type: uploadsActions.UPLOAD_FILTER_SET, payload: {}}
 ));