yet another state management Angular library

Michał Michalczuk

michalczukm.xyz

Michał Michalczuk

Senior JavaScript Developer

Ciklum / Stibo Systems

 

 

IT trainer

infoShare Academy

 

yet another state management Angular library

Michał Michalczuk

michalczukm.xyz

This speech is about

NGXS and its features

not about state management in general

But a one slide reminder wont hurt

        as pattern

        with effects

        implementations in

 

NGXS is a state management pattern + library for Angular.

       ...

NGXS is modeled after the CQRS pattern popularly implemented in libraries like Redux and NGRX but reduces boilerplate by using modern TypeScript features such as classes and decorators.

What

can do?

More or less
everything as

but ...

In more OOP way

Without lot of boilerplate

 

And few things more - wait for it

 

With lot of decorators

 

Take a look at it

Do you have more?

Snapshot

When you need synchronous access to store data

Snapshot

const currentStickers: Sticker[] = 
    this.store.selectSnapshot(state => state.stickers.stickers);

Anywhere in your app

Mini life cycle

import { ..., NgxsOnInit } from '@ngxs/store';


@State<StickersStateModel>({ ... }})
export class StickersState implements NgxsOnInit {

  ngxsOnInit(context?: StateContext<StickersState>) {
    if (context) {
      ctx.dispatch(new FetchStickers());
    }
  }

  ...
}

ofAction

import { Store, Actions, ofActionSuccessful } from '@ngxs/store';


export class AppComponent implements OnInit, OnDestroy {

  constructor(private store: Store,
    private actions: Actions) {
  }

  ngOnInit(): void {
    this.actions
      .pipe(
        ofActionSuccessful(AddSticker)
      )
      .subscribe(
        (action: AddSticker) => console.log(
            `${action.payload.name} sticker bought!`
           )
      );
  }

  ...

}

plugins

  • Storage Engine

  • Router

  • WebSocket

  • Forms

When use

So ... is it like this?

Or ... is it like this?

For sure this is true

Statefull
components

Michał Michalczuk

michalczukm.xyz

Thank you!

michalczukm

Questions time

One more thing!

 

Second edition of mine course ... sooon

Also

New "Across Stack" soon

Michał Michalczuk

michalczukm.xyz

Thank you!

michalczukm

NGXS - yet another Angular state management library

By Michał Michalczuk

NGXS - yet another Angular state management library

Angular3city, 06.11.2018 Gdańsk

  • 122
Loading comments...

More from Michał Michalczuk