Ngex global state for Angular 6

###¿Qué es Ngex?

Ngex es una pequeña libreria basada en el patron observador para manejar un estado global de la aplicacion en Angular 6.

Para utlizar Ngex primero debemos instalar la libreria con el comando npm install

npm install --save ngex

Una vez instalada la ibreria crearemos una carpeta dentro de la carpeta /app llamada store y dentro crearemos los archivos:

• store.ts
• actions.ts

Configurando Ngex

#####store.ts

En este archivo esportaremos un objeto literal que contendra nuestros estados globales.

Hacemos import de Store de Ngex y creamos nuestro estado.

import { Store } from 'Ngex';

export const store:Store = {
    name:"Ngex"
}

#####actions.ts

En este archivo exportaremos una funcion que retornara un array con todas nuestras acciones, las acciones se encargaran de modificar el estado global.

Estas acciones se definen como objetos que tienen una propiedad de nombre type que es de tipo string y que representa el nombre de la acción, este objeto tambien consta de un metodo llamado action que recibe la funcion que modificara el estado global de la aplicación.

Hacemos import de Actions de Ngex y creamos nuestros actions.

import { Actions } from 'Ngex';


export function actions(state):Actions[] {
    return [
        {
            type:"CHANGE",
            action: (value:string) => state.name = value
        }
    ]
}

#####app.module.ts

Para utilizar Ngex debemos configurarlo en nuestro app.module.ts, lo primero sera importar los archivos store.ts, actions.ts y Ngex.

Luego consfiguramos Ngex con su metodo forRoot() proveniente del modulo NgexModule, pasando un objeto con el store y los actions. Y agregando Ngex a los providers.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgexModule, Ngex} from 'ngex'

import { AppComponent } from './app.component';
import { store } from './store/store';
import { actions } from './store/actions';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgexModule.forRoot({store:store,actions:actions})
  ],
  providers: [Ngex],
  bootstrap: [AppComponent]
})
export class AppModule { }

#####Utilizar Ngex en los componentes

Para utilizar Ngex solo debemos hacer el import de Ngex y declararlo en el constructor.

import { Component, OnInit } from '@angular/core';
import { Ngex } from 'ngex';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private ngex:Ngex){}

  ngOnInit(){}
}

#####Consumir el store desde la vista

Solo basta con llamar a ngex.state,proiedad y podremos acceder a nuesto store global.

<h1>
    Welcome to {{ ngex.state.name }}
</h1>

#####Ejecutar un accion.

Para ejecutar una acciones Ngex nos entrega un metodo llamado emit() el cual recibe como primer parametro el nombre de la accion a ejecutar y como segundo parametro el valor a cambiar.

change(){
    this.ngex.emit('CHANGE', "ngex2.0")
}

Sugerencias: [email protected]