Angular NgRx store with Effects
Hey peeps… In this article, I will give you a brief and clear introduction to Angular NgRx with Effects. In my next article, I will explain a simple application guide to implement Ngrx with Effects concepts. I recommend you to first follow this article and get a good understanding of Ngrx with Effects and then see my next example guide.
If you are using Angular for the front-end development, NgRx store and Effects are some of the most important things that you want to know for developing your application in standard and more organized manner
Since you been using Angular for a long time, didn’t you use NgRx or any state management library? It means you never did the state management properly in your application. But don’t worry let’s start it from now. If you are going to implement an enterprise system, using Ngrx is really really important.
If you are a newbie to Angular you would face a problem like how to pass the data between the components. Without NgRx you can do these using Event emitters also. But with NgRx you can easily solve this problem without the help of the event emitters and parent-child component relationship.
Ok fine… let’s move on to the topic.
Why use NgRx ?
- Handle the complexity of the application
If your application is a large application it would have lots of states, data flows, and components to manage.Ngrx does the state management. Properly managing the states in the application will reduce the complexity of the application. Also, Ngrx reduce the coupling between the components of the application. Loose coupling makes easier to handle the application and it reduces the complexity of the application.
- Increase the code readability
With Ngrx we define our actions, reducers, effects separately. So others can easily adapt to our code due to the code been much easier to understand and readable.
I mentioned the terms state and state management several times earlier. But what is the application state?? Before talking about state management better to know about the state…
What is Application state
If we consider about the server side, it has some kind of states in the database. But on the client side, we can have a big application which has various types of states. I have listed below some of the common types of states in the application state that encounter every day when dealing with applications.
- Server response data
Loading data from Get or Post request, after we put it into the store, we can subscribe it and access it from anywhere in the application.
- User inputs
We also got things like user inputs, this is where we deal with forms.
- UI state
UI state, for an instance we may have drop downs, navigations or particular toggles.
- User information
After the login, information like email, username store inside of the store and we can access that things thorough subscribing.
- Route states
Route state is one of the most important location data in the application.
When considering about managing application state, we have to consider about these state information also.
Difference between state and store?
The state is, in fact, the representation of our applications. This representation simply just lives inside of the store. The store allows us to access the state, we can instruct the store to update the state and we can read new values when we actually compose new application state.
Keep in mind, an application has only one global store and every state data store inside of that store.
Now let’s understand the real concept of state management. Below diagram shows the flow of managing a state.
Here the cycle describes the flow. In order to update the store, the application should dispatch an action. After dispatching an action it is handled by a reducer. Reducer is actually a pure function. It catches the action and updates the store according to the action. Then reducer returns a new state and rendering the state, the application does the updates.
I will explain this again using a simple example as it will make sense to you even more:P.
Consider a situation like you select some item in a drop-down. Here the action is select dropdown value. Then reducer catches that action and creates a new state using the new value. Here store updates with new selection value and after that, you can subscribe it and access it from anywhere in the application.
This is a very simple example to get an idea of that flow. I will give you more examples and sample codes in later part to clear your doubts about the flow.
I hope now you have some idea about state management and related words like state, store, action, and reducer. Now let’s understand the effects.
Effects will allow us to handle asynchronous operations in Ngrx. Most of the time these operations are calling an API.
Sometimes dispatching an action lead to some side operations. As an example, we select some item in a drop down and it loads data from an API using that selected value. Following diagram shows you the effects flow.
This diagram is the same as the previous one, additionally added the effects part. When some action dispatches, it triggers the effects part. Effects load the data from a service and data returns with a new action that we have defined.
Let’s clear this also using a simple example.
We want to get the set of user details from a server via API. So from the application, we click a button to get the data. In this kind of situation, mainly we have to write two actions. One for trigger the effect to call the API and other for getting the data. When we click the button in the application, it dispatches an action and it is handled by the effects. Then effect triggers and call the API to get the data. After loading the data, it returns another action including the data. Then it handles by the reducer and it returns a new state using those data. After that, anyone can access those data by subscribing it.
Finally, you came to the ending of this article. I hope now you have some understanding about the Ngrx store and the Effects. In this article, I didn’t mention the code parts because if you are new to this it will be much difficult to understand it. In my next article, I will explain a simple guide to get a better understanding of using Ngrx and Effects. Cheers!!!! :D
