NGXS en Angular 6

2
5439

Índice de contenidos

1. Introducción

En este tutorial aprenderemos las bases de NGXS. Una nueva librería de manejo de estados para Angular. Responderemos a algunas preguntas como:

  • ¿Por qué otra librería de manejo de estados?
  • El flujo de datos en NGXS
  • Creación de acciones
  • Creación de estados
  • Uso desde componentes
  • Uso de un servicio externo

2. Entorno

El tutorial está escrito usando el siguiente entorno:

  • Hardware: MacBook Pro 15’ (2,5 GHz Intel Core i7, 16GB DDR3)
  • Sistema operativo: macOS Sierra 10.12.6
  • Entorno de desarrollo: Visual Studio Code
  • Versión de Angular: 6.1.8
  • Versión de Angular CLI: 6.2.3
  • Versión de @ngxs/store: 3.2.0

3. ¡¿Por qué otra librería de estados?!

El objetivo de NGXS es hacer cosas lo más simple y accesible posible.

Si has usado ngrx o Redux, sabrás la cantidad de boilerplate que estas librerías requieren. Uno de los objetivos principales de NGXS es reducir el boilerplate. O como ell@s dicen:

Do more things with less

Curva de dificultad reducida

Una de las razones por la que la curva de aprendizaje se dificulta con ngrx o Redux, (especialmente para desarrolladores que vienen de Angular o de OOP) es aprender el nuevo paradigma funcional.

NGXS ofrece una forma de trabajo más parecida a Angular.

No más bloques de switch

La librería se encarga de saber a que método llamar según qué acción es disparada.

Inyección de dependencias

Una de las mejores cosas de Angular es su dependency injection. NGXS permite inyectar servicios de Angular desde las propias clases de estado.

Ciclo de vida de las acciones

En NGXS, las acciones son asíncronas, lo que permite que tengan un ciclo de vida. Esto significa que podemos esperar a que una o varias acciones sean completadas. Facilitando así los flujos de trabajo.

Promesas

Los observables de Rxjs son muy útiles, pero en ciertos casos una promesa de ES6 es la opción a elegir. NGXS permite el uso de promesas tanto como el de Observables.

4. El flujo de datos en NGXS

El flujo de datos en NGXS suele ser el siguiente:

Flujo de datos de NGXS

  1. El componente invoca una acción con dispatch.
  2. El estado recibe la acción y muta sus datos.
  3. El componente es notificado del cambio y es actualizado automáticamente.

Esto significa que:

Siempre que ocurra una acción, el estado será mutado.

Una acción conlleva un estado

Esta garantía nos permite delegar el control de estado en NGXS y centrarnos en el desarrollo.

5. Instalación

NGXS se añade como una dependencia a nuestro proyecto de Angular con:

Recomiendo instalar también las dependencias de desarrollo con:

Para añadirlo a nuestro módulo de aplicación importamos las dependencias en app.module.ts:

Las librerías NgxsReduxDevtoolsPluginModule y NgxsLoggerPluginModule nos permiten ver el estado de la aplicación en tiempo real en la consola del navegador. Te recomiendo que durante este ejercicio tengas los devtools abiertos y que vayas viendo los cambios.

También puedes añadir a tu navegador la extensión Redux para Chrome
y para Firefox

6. Especificación de la aplicación.

Si has leído mi último tutorial, sabrás que antes de ponerme a programar me gusta establecer una especificación clara de la necesidades del proyecto. Vamos a hacer una aplicación muy simple, pero siempre está bien dejar claro lo que vamos y no vamos a hacer desde el principio.

Vamos a desarrollar una aplicación de contador:

  • Mostrará un número entero, nuestro total. Por defecto 0.
  • Tendrá un botón [-], si se pulsa, restará 1 a nuestro total.
  • Tendrá un botón [+], si se pulsa, sumará 1 a nuestro total.
  • Tendrá un botón [R], si se pulsa, reseteará el total a 0.

Y no podría faltar el mockup de la interfaz.

Mockup de la Interfaz

7. Creación de una Acción.

Nuestra aplicación tiene tres acciones posibles:

  • Sumar 1 al total.
  • Restar 1 al total.
  • Resetear el total a 0.

Vamos a crear el fichero store/counter.actions.ts y a añadir las tres acciones.

Una acción tiene:

  • Un type. El «nombre» de la acción, que lo representa.
  • Un constructor. Por el que podemos pasar todos los argumentos que necesitemos.

8. Creación de un Estado.

Ahora que tenemos nuestras acciones, creamos el archivo store/counter.state.ts y añadimos:

Dentro de un estado definimos el comportamiento que tendrán las acciones al ser invocadas con ‘@Action(nombre_de_acción)’.

También podemos usar ‘@Selector()’ para acceder de forma directa a datos del estado desde otra parte de la aplicación. Es como una query predefinida, un «acceso directo» al estado.

No te olvides de añadir el estado que acabamos de crear en el array NgxsModule.forRoot([]) de AppModule:

9. Creación de un Componente.

Ahora vamos a crear un componente para probar nuestras acciones y estado. (En este caso lo haremos en el AppComponent principal.

Debemos destacar que @Select() nos devuelve un observable de tipo CounterStateModel. Por lo que en el template HTML debemos usar el pipe async para que Angular se encargue de manejar el renderizado de datos asíncrono.

10. Guardando datos de un Servicio Externo.

Lo que sabemos hasta ahora está muy bien, pero en el mundo real, la mayoría de datos del estado de nuestra aplicación vendrán de servicios desde nuestro servidor. Las peticiones HTTP añaden un nivel de complejidad al sistema, ya que tenemos que controlar los errores que puedan surgir por el camino.

En este ejercicio vamos a usar una API REST de usuarios falsos.

Si nos metemos al endpoint de la API podemos ver lo que nos devuelve:

https://jsonplaceholder.typicode.com/users

Sabiendo lo que devuelve, vamos a hacer que muestre los usuarios de una forma como esta:

Antes de crear el servicio, vamos a crear el tipo user en el archivo models/user.model.ts. No es necesario que contenga todos los atributos que nos devuelve la API.

Creamos el archivo services/users.service.ts e implementamos la lógica necesaria:

No nos olvidemos de importar el HttpClientModule en AppModule:

Creamos el archivo store/users.actions.ts y añadimos las acciones que vamos a usar.

Creamos el archivo store/users.state.ts e implementamos las acciones que acabamos de añadir.

No nos olvidemos de añadir el nuevo estado en AppModule NgxsModule.forRoot([]):

Para probar el funcionamiento, vamos a añadir a app.component.ts lo siguiente:

Y añadimos esto en app.component.html:

Muy bien, ahora si entras en la página, deberías ver una lista con 10 usuarios.

11. Conclusiones.

NGXS es una librería muy nueva, los primeros commits comenzaron en febrero de 2018, tiene 8 meses de edad en el momento de publicación del tutorial.

Es difícil saber si superará a ngrx como librería de estados de Angular por defecto o si continuará el mantenimiento por la comunidad. Pero actualmente, se trata de un buen concepto para una futura alternativa.

Puedes clonar y probar el proyecto con:

O descargarlo desde Github:

Proyecto en Github

12. Referencias.

2 Comentarios

Dejar respuesta

Please enter your comment!
Please enter your name here