Get best of the week

Angular: a clear introduction to NGRX

imageThe 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

Continued article with an example use: "Angular: an example of using NGRX . "

What is NGRX


NGRX is a group of libraries “inspired” by the Redux pattern, which, in turn, is “inspired” by the Flux pattern. Simply put, 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.

What I mean by the "angular / rxjs" version of redux ... the "angular" part is that ngrx is a library for use in angular applications. Part of the “rxjs” is that the ngrx implementation works around the rxjs stream . This means that it works using observable and various observable operators provided by rxjs.

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.
In one store? We will talk about repositories later, but for a general understanding, they are responsible for maintaining the state and applying changes to it when they are told about it (when the action is sent, we will also talk about them later).

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).
Submit an action? .. We will talk about actions later, but for a general understanding, these are the identifiers of the operation on your application, and they can be launched (or sent) to tell the application to perform the operation that the action represents.
By avoiding updating status 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 the dispatch of 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 has 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 strategy for detecting changes 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 note the most important advantages of using redux template in the application (in my opinion):

  • , , .
  • redux , .
  • , , , , ngrx rxjs, .
  • ngrx, .

…


  • NGRX, , . , , , . , .
  • . , - , , , , , , . () rxjs .
  • NGRX Google, , , Angular ngrx. - , , .

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 consider 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 won’t get it and don’t 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.

image

In the image we see the ngrx stream. Let's explain it ...

  1. . , , , .
    …

    «» () . — , NGRX Action. Action' ( GetUserName):

    type (): , , . : '[User] Get User Login''.

    payload ( ): , . , . .
  2. , ( switch) , , .
    ...

    — , : . ngrx , , , , , .
  3. , - , . , - HTTP .
    ...

    ngrx , ngrx.

    Effects , - , , , , , .

    , API.

    , , (success, error ..), , ngrx.
    , ( ), «-» ( , ).
  4. . , ngrx , , .
    ...

    , , , .

    NGRX «» . , , .

    . . «store» , .

    ...

    A store is an object (an instance of the Store ngrx class) that combines the things we mentioned earlier (actions, reducers, selectors). For example, when an action is sent (using the send function of the storage object), the storage is the one that finds and executes the corresponding reducer.

    He is also an application state holder.


Continued article with examples of use: "Angular: an example of using NGRX . "

More articles:


All Articles