State Management In Angular Using NgRx

NgRx is a framework developed and maintained by the official Angular team.

NgRx stands for Angular Reactive Extensions. In short, it is a state management system based on the Redux pattern.

This will help us to manage the application state in a bigger angular application.

Let’s try to understand more about NgRx by considering a simple angular app Bike Rental Portal

We have multiple components in our app for different features.

Please refer to the diagram below.

Here, the application state is stored in angular services.

It will work as expected as all the components can get or set the required data from this service 'BikeService'

But, the actual problem is if we refresh the page we will lose the application state stored in the angular service.

So, If we use the angular services to keep the application state, it is necessary to use a backend to save the application state.

Then, we should fetch the state (persistent state) from the backend when the page reloads again.

As we all know, the state is not just data as user data, it will decide what should be visible on screen.

For smaller applications, it is fine to use components and services for application state management.

But, it would become difficult to manage the application state when our application gets complex and big.

Consider the below diagram.

Here we added the authentication service for our app. Now we have to store the authentication state and application state for components 

If we are developing a big application with a large number of components and services, it would be difficult to manage the states stored in the services.

What is Redux?

Before we start learning NgRx, we should have a good understanding of the Redux pattern.

Redux is a state management pattern and a library to implement that pattern into any application.

The main idea behind the management of the state using the Redux pattern is that we have a single central store to keep all applications state.

We can consider this store as a large javascript object that holds all the data of different parts of our application needs.

Our components and services can communicate with each other. But they receive their states from this central store.

We can say the store is the single source of truth that manages the entire application state.

Please refer to the diagram below.

It is necessary to update the store to keep the application state up-to-date.

For this, we dispatch Actions

Action is just a javascript object with an identifier to understand the kind of action and an optional payload.

The action does not directly reach the store. It will reach to Reducer first.

The Reducer is just a javascript function that will fetch the current state stored in the store and expect a parameter 'action'.

Then, it will identify the kind of action based on the action identifier and execute code on the state to update that state in an immutable way.

Ie, copying the current state and changing the copy.

Finally, the reducer will return to the new state(reduced state).

The new state will be forwarded to the application store and will overwrite the old state with the new state.

This is the basic flow of the redux pattern.

As you can see, the redux pattern enforces a clean and well-structured flow of data.

We have only one place to store our application state data and we only edit it through actions and reducers.

Then we will receive the state through subscriptions.

We can use the redux library in the angular application for state management.

Why NgRx?

NgRx is the angular implementation of the Redux library.

It comes with angular-specific items with the Redux library. Please refer to the below diagram of NgRx.

In the above diagram, the green boxes are the angular-specific items added newly in the Redux diagram.

As you can see in the above diagram, a new part added to the state management library –Side Effects

Side Effects can execute some logic to bring back data to memory or send HTTP requests and based on the response it can dispatch new action.

Summary

In this article, we learned about the basics of the NgRX library and its structure. 

In my next article, we will discuss the implementation of ngrx pattern in a simple angular application.

Next Article inkk  : Implementing NgRx - Understand And Add Reducer function In Angular Application

Happy Learning