Effects
Let's explore how we can load data from external APIs using Effects in NgRx.
What is the Effect?
Effects are RxJs-based, so bringing in our knowledge of RxJs from the Observables and RxJs chapter:
The role of an Effect is to listen to any Action that has been dispatched.
After doing this, the Effect checks to see if it has a case for the dispatched Action, in the same way as a Reducer. If there is a case for the Action, the Effect will run that case. This could be making an API call to either get or send data.
Then, the result of the API call would cause the Effect to emit another Action, which a Reducer would pick up, taking us back into the NgRx workflow of Actions and Reducers. So, Effects make calls to the side of the main NgRx workflow, which is why they get the name Side Effects or Effects.
Key concepts of Effects
There are some key concepts of Effects, which are as follows:
- They isolate side effects from the components
- They are long-running Services that listen to an Observable of every Action dispatched from the Store
- They filter these Actions by the Type of the Action using an RxJs Operator
- They perform both synchronous