I need to dispatch multiple actions after calling an API request in my effect. I'm using this code at the moment to dispatch one action after API request done:
changeStatus$ = createEffect(() =>
this.actions$.pipe(
ofType(fromJtDetail.changeStatus),
switchMap(action =>
this.jtDetailService.changeStatus(action.entity,action.jobTicketId).pipe(
map(res => fromJtDetail.statusChanged({changedStatus: action.entity.newStatus})),
catchError(error => EMPTY)
))));
it's important to dispatch more actions in this effect, can't write another effect for this.
All of the answers here are correct, the "simple" answer and solution is to return an array of actions. However, this is a bad-practice, for more info see No Multiple Actions In Effects from the docs of NgRx ESLint.
You can dispatch multiple actions using switchMap + of(
changeStatus$ = createEffect(() =>
this.actions$.pipe(
ofType(fromJtDetail.changeStatus),
switchMap(action =>
this.jtDetailService.changeStatus(action.entity,action.jobTicketId).pipe(
switchMap(res => of(
fromJtDetail.statusChanged({changedStatus: action.entity.newStatus}),
fromThere.doSmthAction(), // <-- additional action 1
formHere.doSmthElseAction(), // <-- additional action 2
)),
catchError(error => EMPTY)
))));
EDIT:
Althought it can be done you should not do it.
Have a look at
no-multiple-actions-in-effects
You can pass the array of actions into a switchMap like below:
switchMap(result => ([new Action1(result), new Action2(result)])