NgRx Store
NgRx store is the state management solution for Angular applications. It acts as a backbone for Angular application and must be decided at the architecture level whether to use store or not. It is often good idea to use store when the application is dealing with medium to large amount of data. It also helps in the debugging or testing the application properly
NgRx store is basically helps to improve the performance of the application. It acts as a local storage for the data due to which server side rendering is not required every time when fetching the similar data between different tabs or components. Consider NgRx store as a local database in which when the application starts it fills up the database now each time when application needs that data it will first check the store if the data is present before making the API call to fetch data. In this way if data is already present in the store, it will prevent from making the API call and the performance of the application will improve drastically.
To install NgRx store in your application use the following command:
ngrx i @ngrx/store
The above flow chart describes the working of store in details.
To implement store in our application we basically use Actions and Reducers.
Actions: It basically defines all the unique events we are going to use in our applications.
It basically consists of two things:
- type in the form of string.
- optional payload of data.
Reducers: A reducer is what takes the incoming actions and decides what to do with it. It takes the previous state and returns a new state based on the given action.
Now let’s understand the working of the store.
The concept of NgRx store is based on the observables. We use observables as we can define property as an observable because that’s what returned from NgRx store when we try to access the data.
The component dispatch an event to the action, it will decide the appropriate action for that request and send that action to the reducer. Reducer is where we have certain logic written that will perform based on the action received. It will take the previous state and action and will return the new state to the component which will then renders the data received from the store. Since it is implemented as observable, so whenever there is change in data, the components that are subscribe to that store will be informed and the component will take appropriate action.
Please find below the simple working example of NgRx store: