effect offers a simple way to trigger side effects (e.g. API calls) for a Feature Store.
When the side effect completed we can update feature state straight away (by using
The code above creates an effect for fetching the todos.
The API call is the side effect which needs to be performed.
effect returns a function which can be called later to start the effect with an optional payload (see
payload$.pipe we can define how to handle the side effect.
With RxJS flattening operators (mergeMap, switchMap, concatMap, exhaustMap) we can easily take care of race conditions (e.g. if you trigger a lot of API calls at the same time).
Inside the RxJS
catchError operators we can call
this.setState() to update state.
It is important to handle possible API errors with
catchError to make sure that the effect source does not complete. Otherwise, the effect will not work anymore.
We can skip the
payload$.pipe if we use only one RxJS operator: