State Management In Angular Using NgRx

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