The purpose of this article is to give a clean and clear view of ngrx. To do this, I will explain what you need to know and understand about ngrx, and then we will see it in action with simple and clear code examples.

Here is a list of topics that we will discuss in this article:

  • What is ngrx
  • Benefits of Using ngrx
  • Disadvantages of using ngrx
  • When to use ngrx
  • Actions, Gearboxes, Selectors, Storage and Effects

What is NGRX

NGRX is a group of libraries “inspired” by the Redux pattern, which, in turn, is “inspired” by the Flux pattern. This means that the Redux pattern is a simplified version of the Flux pattern, and NGRX is the angular / rxjs version of the Redux pattern.

The main goal of this scheme is to ensure the predictable state of the container based on three basic principles.

Let’s look at the three principles of the Redux model and point out the most important benefits they provide.

The only source of truth

In the case of the redux / ngrx architecture, this means that the state of your entire application is stored in the object tree within the same repository.

The benefits of having one source of truth are numerous, but for me the most interesting (because this is what will affect any angular application) is the following:

When you create an Angular application, you usually split the state and handle several services. As your application grows, tracking changes in your state becomes more and more difficult and as a result it becomes messy, it is difficult to debug and maintain. Having a single source of truth solves this problem, because the state is processed only in one object and in one location, so debugging or adding changes becomes much easier.

Read-only state

You will never change the state directly, instead you will send actions that describe actions with the object (these can be things like getting, adding, removing, or updating the state).

By avoiding updating the state from different places and having a centralized place for making changes that responds to specific actions, you get many benefits. Not to mention the most important:

You know that any change in state will occur in only one place. This has a big impact on debugging and testing.

You know that if a certain action is sent, then the operation in the state is always the same. Again, this directly affects debugging and testing.

Changes are made with simple features.

An operation initiated by sending an action will be a simple function called reducers within the framework of the redux architecture.

These reducers (remember that they are simple functions) receive an action and state, depending on the action sent (usually with the switch statement), they perform the operation and return a new state object.

The state in the redux application is unchanged! Therefore, when a reducer changes something in a state, it returns a new state object.

The benefits of using pure functions are well known, such as the fact that they can be tested immediately if you pass the same arguments that you get as a result.

This approach also allows us to move between different instances of our state using the Redux / ngrx development tools and see what has changed between the instances and who changed it, among other things. Thus, using pure functions and returning new state instances also has a big impact on debugging.

But the main advantage, in my opinion, is that by binding all the input data of our components to the state properties, we can change the  detection strategy to push, and this will increase application performance.

Great … So, what are the benefits of using NGRX?

We already mentioned most of them when we talked about the principles of redux template. But let’s highlight the most important benefits of using a redux template in an application (in my opinion):

  • Since we have a single source of truth, and you cannot directly change the state, applications will work more coherently.
  • Using redux template gives us many interesting functions that facilitate debugging.
  • Testing applications is made easier as we introduce simple functions to handle state changes, and also because both ngrx and rxjs have many great testing opportunities.
  • As soon as you feel comfortable using ngrx, understanding the data flow in your applications will become incredibly simple and predictable.

Cons

  • NGRX, of course, has a learning curve. It is not big, but not so small, and I think that it requires some experience or a deep understanding of some program patterns. Any average developer should be fine, but for a younger one, it can be a bit confusing at first.
  • This seems a bit verbose to me. But every time you add a property to a state, you need to add actions, dispatchers, you may need to update or add selectors, effects, if any, to update the store. And also you start pipelined (concatenation) rxjs of operators and observables everywhere.
  • NGRX is not part of the core corner libraries and is not supported by Google, at least not directly, because there are ngrx members in the Angular team. There is just something to think about before you add a library that will be a big dependency for your application.

When to Use NGRX

Thus, it is generally agreed that ngrx should be used in medium / large projects when state management becomes difficult to maintain. Some more fanatical people will say something like “if you have a fortune, then you have NGRX.”

I agree that it should be used in medium or large projects when you have significant state and many components that use this state, but you should bear in mind that Angular itself provides many state management solutions, and if you have a strong Angular development team, then maybe you do not need to worry about ngrx.

At the same time, I believe that a strong Angular development team can also decide to include ngrx in the solution, because they know the full power of the redux template, as well as the strength added by the rxjs operators, and they feel comfortable working with both …

If you were expecting a simple answer to decide when to use ngrx, you will not receive it and do not trust anyone who gives you this answer outside of your organization or group. The decision depends on studying the pros and cons, understanding your team and taking their opinions into account.

NGRX Actions, Gearboxes, Selectors, Storage, and Effects

These are the basic building blocks of the ngrx stream. Each of them takes on a part of the process of starting an operation to change our state and obtain data.

1.In the most common scenario, it all starts with the presentation of components. Some user interactions can cause the component to submit an action.

2.If this action does not cause an effect, the reducer will analyze this action (usually using the switch statement) and return a new state, which will be the result of merging the old state with the value changed by the call of this action.

3.If an effect is triggered as a result of sending an action, this is due to the fact that some side effects will occur before the reducer is called. This could probably be something like calling an HTTP service to retrieve data.

4.Now a new condition has appeared in the store. A state can be a large tree of objects, so ngrx introduces selectors in order to be able to use only those fragments of the object that we need in a particular component.