From Reactive Services to NGXS

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

In a previous article, 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
            ├── counter.actions.ts
            ├── counter.queries.ts
            └── counter.state.ts

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

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:

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.

Think of actions as commands.

Now let's see what is inside 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:

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.

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

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

You can find the source code for this article here