Data, Models and Analytics Blog

Data, Models and Analytics Blog

By Marc Skov Madsen, PhD (Math), CFA®, Lead Data Scientist Developer at Ørsted

My Notes on State Management with NGXS

A colleague suggested I learn state management in Angular using either NGXS or NGRX. He recommended NGXS over NGRX as it seems to be better integrated with Angular.

These notes documents the steps and learnings.

State is really just data

A typical web application has the following six types of state:

  • Server state
  • Persistent state (subset of the server state stored on the client, in memory)
  • The URL and router state
  • Client state (client state equal to URL and router state)
  • Transient client state (client state not in URL)
  • Local UI state

In my head I visualize the above as sets.

The architecture of state can be shown as

state architecture

This is how ngx state management works

The architecture of the ngxs state management can be shown as

state architecture

Some important definitions are

  • States are classes that define a state container.
  • Action types should contain three parts '[Context] verb Entity'. For example '[Zoo] feed Panda'
    • Actions are normally dispatched from container components such as router pages
  • Events are actions that have already happened and we now need to react to them.
  • In computing and telecommunications, the payload is the part of transmitted data that is the actual intended message.

Ahh. Let's play with our first example

This example is based on Angular NGXS Tutorial With Example From Scratch. I needed to combine with Installation of ngxs.store for the installation.

Steps

ng new ng6xs
cd ng6xs/
npm install @ngxs/store --save
npm install @ngxs/logger-plugin --save --dev
npm install @ngxs/devtools-plugin --save --dev

I then tried to serve but got an error. I solved it by updating to "rxjs": "6.3.3" in package.json. See Issue

ng serve -o
ng g c components/create --spec=false
ng g c components/index --spec=false
npm install bootstrap --save

It works like it should

state architecture

Quick question for my colleague

  • I only see the Store imported in create.component.ts. Shouldn't it be imported and provided in the app.module.ts? Yes. But its imported and provided by
import { NgxsModule } from '@ngxs/store';
...
imports: [
    BrowserModule,
    NgxsModule.forRoot([
      UserState
    ]),

My colleague further more recommended to use

and to study

A second, more advanced example

https://github.com/tommythongnguyen/Ngxs-Pizza-Order

Questions for my colleague

  1. Why does 'schematics' create a XYZStateModule? In the style guide they don't mention StateModule. I would think they should be called XYZState.
  2. How do I create a 'StateModel that extends Array' so that I can refer to my list of Models as

state.models instead of state.XYZStateModule.models

  1. How do I update state of individual model install of state of array of models. It seems costly to me to update state of list of array in stead of individual array.

Resources