Fetch constant API data to store using NgRx Effects | Angular

NgRx is?a framework for building reactive applications in Angular and it is deriving state using RxJS and stores a single state and uses actions to express state changes.

NgRx Effects can be used to fetch API data to state variables and In an Angular app, Multiple API requests are being sent from components to fetch updated data from the server but it is not always required especially if data not changing frequently. Overall, It can improve loading time and bandwidth as well.?

This guide demonstrates a method to fetch data using NgRx Effects.

1. Component

component is loaded by the app and it observes state variable through selector. In this example, an object is used to lists the experience of a person and it has been used as an observable so updates to the state variable are being watched asynchronously and displayed in the component.

IExperiance{ workplace: string; role: string; }        

experience.component.ts

experience.component.html

2. Initialize on loading for the first time

Have a state action to initialize for the first time to request data when it is needed in the component. The call can be made multiple times in both component and root but the data is fetched from API only when the state variable is empty. It is ideally can be used in ngOnInit() method of the component.

datastore.action.ts

and make a call when it is needed.

3. Set state for storing data

Define state variable, selector, reducer and associated action which sets state variable when data is passed on.

If setExperiance(data) is being dispatched, data will be set to state variable "experiance" and it can be accessed from components through the selector "selectExperiance".

datastore.state.ts

datastore.selector.ts

datastore.reducer.ts

Register reducer in app.module.ts

datastore.action.ts

4. NgRx Effect to fetch API data

Next, an effect is created to watch and trigger on initData() method and sets the data using setExperiance(data) if the state variable is empty.

datastore.effects.ts

In this effect, dispatching of action initData() is being watched and gets the latest value of state variable "experience" using withLatestFrom()

If data is available in "experience" the next action will not be dispatched as a filter check using filter() in place. This will stop unnecessary API calls being made to the server despite the state action is being called multiple times.?

debounceTime(5000) is used to make concurrent API requests delayed by 5 seconds and In case of an API error initData() can be run in a loop but this will make sure all API calls are made after an interval.

Switch Map is being used to get the data from an API service which returns an observable.

datastore.service.ts

Now, the work is complete and the component can be used wherever required in the app and data will be fetched from the state variable and if data is not available NgRx Effects will request the API calls to fetch the data.