Menu

Ngxs

angulararchitecture - April 16, 2018 por Carlos Rojas | Edita este Post.
ngxs/store2.0.0

A medida que tu aplicacion va creciendo y vas creando más y más componentes cada vez es mas dificil saber quien cambia el estado de los datos. NGXS es una nueva libreria que te permite manejar un estado global de todos tus componentes.

¿ Que es NGXS ?

Es una libreria para State Management construida pensada en como funciona Angular y busca solucionar el mismo problema de Redux.

Beneficios.

  • Switch statements.
  • Es más parecido al estilo de Angular.
  • Inyección de dependencias.
  • El problema del Boilerplate.
  • Effects pueden ser dolorosos.
  • Escuchamos por las acciones despachadas.
  • Extendemos en abundancia.
  • Promesas.

Los cuatro principios de NGXS.

STORE

Un contenedor global de estados, despachador de acciones y selector.

ACTIONS

Clases describiendo la acción a tomar y su Payload.

STATE

Definición de clase del estado.

SELECTS

Los selectores para dividir los estados.

Usando el Store

Para despachar acciones, debes inyectar el Store e invocar el dispatch.

import { Store } from '@ngxs/store';
import { AddAnimal } from './animal.actions';

@Component({ ... })
export class ZooComponent {
  constructor(private store: Store) {}

  addAnimal(name) {
    this.store.dispatch(new AddAnimal(name));
  }
}

Te puedes suscribir al dispatch y reaccionar acorde.

import { Store } from '@ngxs/store';
import { AddAnimal } from './animal.actions';

@Component({ ... })
export class ZooComponent {
  constructor(private store: Store) {}

  addAnimal(name) {
    this.store.dispatch(new AddAnimal(name)).subscribe(() => this.form.reset());
  }
}

Puedes obtener un snapshot del estado simplemente llamando a store.snapshot()

Usando las acciones.

Si queremos actualizar los estados debemos hacer acciones. Un ejemplo seria asi:

export class FeedAnimals {
  static readonly type = '[Zoo] Feed Animals';
}

Usando los estados.

Para tener un control de los estados en nuestra app creamos clases que representan los modelos y a través de acciones las actualizamos.

import { State } from '@ngxs/store';

@State<string[]>({
  name: 'animals',
  defaults: []
})
export class AnimalsState {}

Usando los selectores.

Para obtener el valor de los estados utilizamos el decorador Selector.

import { Select } from '@ngxs/store';

import { ZooState } from './zoo.state';
import { AddAnimal } from './animal.actions';

@Component({ ... })
export class ZooComponent {
 // Reads the name of the store from the store class
  @Select(ZooState) animals$: Observable<string[]>;

  // Reads the name of the property minus the $
  @Select() animals$: Observable<string[]>;

  // Also accepts a function like our select method
  @Select(state => state.animals) animals$: Observable<string[]>;
}

¿ Como empezar ?

Instala la libreria en tu proyecto.

npm i @ngxs/store --S

y agrega el modulo en app.module.ts.

import { NgModule } from '@angular/core';
import { NgxsModule } from '@ngxs/store';

@NgModule({
  imports: [
    NgxsModule.forRoot([
      ZooState
    ])
  ]
})
export class AppModule {}

Espero este Post sea de utilidad :)

¡Compártelo!