Many developers still associate the products of the NgRx team only with a library for managing the global state of the application. Often, they even use the term “NgRx” as a synonym for “@ngrx/store” – maybe you also still belong to this group?

Anyway, this phenomenon is slightly less surprising, when we take into account that the store is the most popular, even flagship project of the team and that for a long time it was the only library dedicated to Angular. 

The NgRx team has also noticed this trend among developers and, while introducing new features, has decided to clean things up a bit. For the more inquisitive ones, Mike Ryan’s lecture deserves a special recommendation on this topic: The State of NgRx  (ng-conf 2020). I also encourage you to visit the documentation and catch up on any backlog, as a lot has changed here as well, which can be seen at a glance in the navigation itself: https://ngrx.io/docs  (for comparison, the previous version: https://v9.ngrx.io/docs ).

The new documentation mentions early on NgRx being a framework for building reactive applications in Angular. Managing global application state is just one piece of the puzzle. This shows that the NgRx team is quite serious about application reactivity. This is a good step towards addressing this topic more comprehensively.

So what libraries does NgRx offer us and what are they used for? First of all, the creators proposed a division into the three main categories based on the purpose of the libraries: State, Data, and View. Let’s take a closer look at them!

State

State is probably the best-known category. As the name suggests itself, the libraries belonging to it help us manage the application state. Some of them are probably just for the record, but it is quite possible that some of them will be new to you:

@ngrx/store – a Redux-inspired, RxJS-based library that forms the core of global state management. It provides a container for storing data, accessing it (selectors) and mechanisms for modifying it (actions and reducers). It probably doesn’t need to be introduced to anyone, as it is the best known member of the NgRx family.

@ngrx/store-devtools – a library that allows us to debug state using https://github.com/zalmoxisus/redux-devtools-extension/ 

@ngrx/effects – allows us to define behaviors (effects) that occur in our application in response to data appearing in input streams. The most common data stream used in effects is the action stream. The most common behaviors are: calls to service methods, calls to data access layer (e.g. calls to api) and all kinds of asynchronous operations. Usually, effects return further actions modifying the state (although it does not always have to be so).

@ngrx/router-store – provides a bridge between @ngrx/store and Angular Router. Using this library, routing events are reflected in actions, and navigation data is stored by the reducer in the store, from where it can be easily retrieved later.

@ngrx/entity – a library supporting the management of collection of entities that we want to store in the store. It allows you to create reducers, selectors and perform operations on entire collections as well as their individual elements.

@ngrx/schematics – contains schematics for generating store components as well as the components that use it.

@ngrx/component-store – the last item in the State category and also the most interesting one, because it is the newest concept in this group. It appeared only in the latest, 10th version of the framework. Until now, NgRx state management solutions focused only on the global state of the application. This library extends the previous approach and offers tools for defining local state at the level of individual components (or component trees). It should also be emphasized that this solution is by design completely independent from @ngrx/store.

Data

This is the first new category, at the moment it consists of only one library:

@ngrx/data – this library was created as an independent project by Ward Bell and John Papa, so it was initially available here https://github.com/johnpapa/angular-ngrx-data. It was incorporated into NgRx with the release of version 8. The main goal of the library is to reduce the boilerplate associated with the implementation of state elements, which is problematic especially with larger applications, containing many entities.

The library offers easily configurable services for managing data and performing CRUD-type operations on it, still using @ngrx/store and other libraries from the state category behind the scenes. The library has been designed so that in typical cases, the implementation of a service for a given entity could be done literally in a few lines. It is also quite extendable.

View

The newest category, just like the above one, has only one library, but this time it has belonged to the NgRx family from the beginning:

@ngrx/component – this library is somehow an implementation of the NgRx declaration saying that they promote reactivity also outside the application state management itself. It is intended for use in components, specifically their views. At the moment it contains the *ngrxLet directive and the ngrxPush pipe – both addressing specific problems that often arise in reactive views when using *ngIf or async. Particularly noteworthy is the fact that they also work in applications not using zone.js. The future of this product is unfortunately quite uncertain. Soon on our blog, there will appear an article dedicated to this library, in which we will describe it in a more detailed way. We will also touch on the topic of its current status.

Summary

After watching Mike Ryan’s talks, reading NgRx documentation or even just our article, it’s not difficult to see that the NgRx team is trying to expand the set of tools offered and stop being associated only with solutions for managing the global state of the application. Some of the libraries mentioned above are entering new areas – such as the local state of the components or reactive views. While the @ngrx/component example shows that the joy may be premature, still extending the range of NgRx libraries can be considered as a good step. The whole community should benefit from it.

Maybe some of you already use the novelties from NgRx in your projects? Be sure to let us know in the comments!