From NGXS to NGXS Data

This is the second article, aka State Management Level 2 of the series Progressive State Management.

This is the third part of the Progressive State Management series aka State Management Level 2. Here I want to talk about NGXS Data and what problem it solves.

In a previous article, I show how to transition from Reactive Services to NGXS. Today I want to showcase the power of NGXS Data and how to switch from NGXS to NGXS Data if you want to.

So let's see what NGXS Data really is, what problem does it solve and how it may help you!

A lot of Angular developers use NGXS and have a great experience with that. However there is a thing called NGXS Data that probably is not as quite well known to Angular developers as NGXS. NGXS Data is an NGXS plugin that lives in NGXS Labs created by Maxim Ivanov

When you approach state management with NGXS you always end up implementing some sort of boilerplate like store actions and selectors. Boilerplate is a repetitive code that makes your codebase bigger and might lead to problems with maintainability. To keep code base in better health you may consider removing unnecessary context to get the maintainability of your code to the next level.

There is not much boilerplate in NGXS anyway but it is nice that there is a way to make NGXS boilerplate even less.

NGXS Data reduces the NGXS boilerplate by enabling you to write less code. In other words NGXS Data helps you to remove unnecessary context from your code making your code smaller. Imagine actions and selectors no longer needed. How cool is that?

You may refer to this article to see how NGXS standard code is looks like.

So let's see how the NGXS code would look like using NGXS Data plugin

Here is how our store would looks like as we do not need to create any actions or selectors:

└── state
            └── counter.state.ts

Let’s see how the state class definition looks like.

The state class is now decorated with additional @StateRepository() decorator and all the functions are decorated with @DataAction() decorator.

As we do not need to dispatch anything, the component class becoming really lightweight:

The component template stays pretty much the same, the difference there is that we are calling state methods directly from the template but everything else is staying the same.

As you can see there are no changes required within a component template and it is the core principle of Progressive State Management.

Some developers like just a standard way of using NGXS and others prefer NGXS Data. So it is up to you to decide as it fully depends on your flavour, on the way you like to approach your store and on a particular use-case. The best way to find out what works best for you is to try it on practice 🙃

My name is Aliaksei Kuncevič. I am teaching Angular and Web Technology. Helping dev teams to adopt Angular in the most efficient way. GDE, member of the NGXS Core Team.

I hope you find this content helpful and if so, please help to spread this article so more people can benefit from it.

If you want to learn more Angular tips and tricks join for my newsletter at kuncevic.dev

If you want to know more about Angular subscribe for Angular Rocks podcast 🎙

You can find the source code for this article here