NGRX = A Detailed Introduction of Angular + Redux + RxJs

Let’s get started!

Why Do We Need NgRx?

Does it ever happen to you that you were required to share the data between the components or at the root level? Indeed yes! In angular, Input/Output and service-based sharing are preety popular for sharing data.

Let’s have a look at what to do when a problem arises.

Suppose there are two components, namely componentA that is parent component and componentB is child component. And you are required to share User object between these two.

(i) If we share the data using @Input() from componentA to componentB. If any property of the User object is changed from the componentB, componentA will not get an updated user object.

Why?

The data modification is reflected in the component where the change is made; however, other components won’t be affected that results in state management problems.

(ii) If you are sharing the data using shared service, it will hold the state into a single variable from where the user gets updated state object to all the components. Shared service can obviously solve the state management problem; however, there are chances that a user can make the mistake of copying the state and modifying it from the component. Also, on page reload, all the values get reset.

There’s where we welcome the NgRx. Yay!

Let’s have a look at the core concepts of NgrX.

1. Store – It is an object that brings Actions, Reducers, Selectors together.

A whole application has a single store that contains the current state of your application. That is the state will be loaded in the store. To see your state and the store, you can add the Redux DevTools extension in your browser.

2. Actions – In general, what is action?

In angular actions are the events or activities which are dispatched from our component. Like an event fired by the user. I.e. mouse events.

Actions are the classes that implement the Action interface from ngrx/store. It has two parameters.

i) Payload (optional): The data that is passed to the reducers with its action.

ii) Type: type is read-only which specifies your action type.

3. State – It is an object which holds the latest state value that can be altered by reducers.

4. Reducer – Reducers are the pure functions that contains the switch cases of the actions, having initial state and action as a parameter. However, reducers can change the state of your application and helps to update the state in the store.

5. Effects – What if we need to call an API from the ngrx structure? There come effects in a picture. Effects provide a way to interact with those services and isolate them from the components which ultimately generate other actions on their success and failure.

6. Selectors – In simple words, Selectors helps in giving only selected data from our current state. Selectors are the functions used for obtaining slices of store state.

NGRX store facilitates the function “select” to obtain slices of our store. If we want to apply some logic to that slice before using the data in the components, there is when selectors come into the picture. It slices the state by providing logic and then returns that state.

For e.g.: If there are 100 users present in our current state, but we want only that users who live in India, then we can create a selector variable that holds the sliced state of users and return it to our component.

How NgRx works?

Always : NGRX LifeCyle starts from Component

• An interaction made by a user causes the component to dispatch an action.
• It checks the corresponding action in reducer, and also checks is that action is provided in effects? If yes, then it performs the operation (like http requests), and ultimately dispatches other actions.
• Reducers accept the previous state and action and then create the new state.
• So, we have now successfully got our central state object in our store.
• Now selectors allow us to get the part of the store we want, and subscribe to changes to it from the component.

Pros of NgRx

There are 3 significant benefits to use Ngrx. They Are:

• Single Source of Truth

Sounds a bit confusing right? Don’t worry, I will make it clear in just a moment.

It means that the state of your whole application is stored in a single object within a single store. When an angular application is built, the state is manipulated from different components and services by dispatching actions. As the application starts growing, keeping the track of your states becomes difficult and unmanageable. It also gets hard to debug and test your application. So, it would be a way easier to handle the state in one object and one place.

• State is read-only

As the title suggests, the state will be read-only. How it can be achieved? When any action gets dispatched, the reducer function will match the related action and the state object will be changed accordingly. And then, the updated state will get read.

You are never going to change the state directly, instead, you are going to dispatch actions. This helps in debugging and testing the state as only reducer can change the state.

• Changes are made with pure functions

Reducers are pure functions. States are immutable, so reducer changes something in state, it returns a newly updated state object.

That’s it. In this first part, I have provided an in-detail explanation of NGRX. I hope you have enjoyed the blog post and thanks for taking some time to read this blog post.

In the second part we will discuss exemplified explanation, code inclusive, of the content above and more. In case of any question or suggestion, please feel free to discuss in the comments section below.

Happy Learning!