From NGXS to NGXS Data
Tags: angular, ngxs, architecture, webdev
Published: 2021-04-02 10:58:35

---
title: From NGXS to NGXS Data
published: 2 March 2021
description: What is NGXS Data and how to migrate from NGXS to NGXS Data 🚀
tags: angular, ngxs, architecture, webdev
series: Progressive State Management
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hg9p1ppqqhl3j61lfdqy.png
published: true
---
<!---
| Progressive State Management       |
| -------------  |
| [Reactive Services with RxJS](https://dev.to/kuncevic/reactive-services-with-rxjs-49p7)     |
| From Reactive Services to NGXS      |
| coming soon...      |
-->

>_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](https://dev.to/kuncevic/from-reactive-services-to-ngxs-39l2), 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](https://www.ngxs.io) 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](https://github.com/ngxs-labs) created by [Maxim Ivanov](https://twitter.com/splincodewd)

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](https://dev.to/kuncevic/from-reactive-services-to-ngxs-39l2) 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
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└── counter.state.ts

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

{% gist https://gist.github.com/kuncevic/0dbd1c30bb5c7fa6d2904d021e955d02 file=counter.state.ts %}

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:

{% gist https://gist.github.com/kuncevic/0dbd1c30bb5c7fa6d2904d021e955d02 file=child.component.ts %}

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. 

{% gist https://gist.github.com/kuncevic/0dbd1c30bb5c7fa6d2904d021e955d02 file=child.component.html %}

>_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](https://kuncevic.dev?ref=dev)_

>_If you want to know more about Angular subscribe for [Angular Rocks] (https://angularrocks.com/subscribe) podcast_ 🎙

You can find the source code for this article **[here](https://github.com/kuncevic/progressive-state-management-with-ngxs)**