From Reactive Services to NGXS
Tags: angular, ngxs, architecture, webdev
Published: 2020-11-01 22:14:20

---
title: From Reactive Services to NGXS
published: 1 Nov 2020
description: How to migrate from Reactive Services to NGXS 🔥
tags: angular, ngxs, architecture, webdev
series: Progressive State Management
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0gc3yro5c5jy3lv7ww5.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**_.

[In a previous article](https://dev.to/kuncevic/reactive-services-with-rxjs-49p7), I show how to implement Reactive Services using RxJS BehavoiurSubject and rx-service. Today I want to show how to transition from Reactive Services to NGXS. 

Before we get started let's define what Progressive State Management is. 

>_Progressive State Management is a technique that allows to progressively enhance the functionality of the application state in a way that won't affect the existing application data flow._

So, using Progressive State Management technique helps to design applications that are easy to migrate to a state management solution later, if you decide to do so. 

There are multiple state management solutions available for Angular that you might consider at this stage, however  let's see how easy it is to migrate from Reactive Services to NGXS. 

When you implementing NGXS in your app it is always a good practice to keep store, actions and selectors different files following separation of concerns, here is an example:

└── state
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── counter.actions.ts
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├── counter.queries.ts
&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/2494bca4d1bd59fc122403cd7127aead file=counter.state.ts %}

The state class is decorated with a **@State** decorator and all the functions are decorated with **@Action** decorator. 

So here when the particular action dispatched the function associated with that action will be executed accordingly. So now let's see what is inside our **counter.actions.ts** file.

Actions usually defined in a dedicated file, here you can see how actions are defined:

{% gist  https://gist.github.com/kuncevic/2494bca4d1bd59fc122403cd7127aead file=actions.ts %}

Actions in NGXS represented by classes. Actions behave like triggers, or also they can represent the resulting event of something that has already happened. Each Action has to have a unique name and usually state functions decorated with actions. To learn more about actions you can see the [documentation](https://www.ngxs.io/concepts/actions).

>_Think of actions as commands._

Now let's see what is inside **counter.queries.ts**. 

{% gist https://gist.github.com/kuncevic/2494bca4d1bd59fc122403cd7127aead file=counter.queries.ts %}

This **counter.queries.ts** file contains selectors. Selects are functions that slice a specific portion of state from the global state container. 

>_Think of selectors as queries._

Now let's see how actions gets dispatched: 

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

>_In order to call the state function we have to dispatch an action associated with that function._

Action executing results with an observable. In some cases when there is no need to process the action result we can just bind the observable to the component template using AsyncPipe. 

{% gist https://gist.github.com/kuncevic/2494bca4d1bd59fc122403cd7127aead 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.

---

>_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 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)**