NgRx (1)

Redux es un patron de disenio que ayuda, a traves de una libreria, a gestionar el estado de una aplicacion usando eventos, aqui llamados «acciones». El estado de la aplicacion esta centralizado en un almacen y no es modificable per se, sino que cada vez que necesitemos actualizar el estado crearemos un nuevo estado a partir de el con las modificaciones que haya lugar.

NgRx (https://ngrx.io) es la libreria mas usada en Angular para el desarrollo con Redux. Gestiona estados de forma global para toda la aplicacion como de forma local para un componente, se integra con el Router de Angular y provee de herramientas para ayudar en el desarrollo y depuración de nuestras aplicaciones reactivas.

Instalando lo necesario

Una vez inicializada nuestra aplicación Angular instalaremos via npm los componentes necesarios.

npm i @ngrx/store --save
npm i @ngrx/effects --save
npm i @ngrx/store-devtools --save-dev

La libreria @ngrx/effects solo es necesaria si vamos a trabajar con «efectos», que explicaremos mas adelante.

Si somos de los de usar herramientas de «scaffolding» NgRx nos provee de una herramienta para generar los artefactos necesarios que se integra con el CLI de Angular

npm i @ngrx/schematics --save-dev

El patron Redux tiene tres elementos principales, y un cuarto «opcional».

Store

El Store, o almacenamiento se encarga de mantener la informacion que queremos este disponible para la aplicacion. Es inmutable, es decir, no podemos modificar y/o añadir nuevos elementos de forma directa sino que lo haremos a través del reducer, generalmente como consecuencia de una acción.

Reducer

El reducer es el alma del patron Redux. Se encarga de proveer de un nuevo estado cada vez que se recibe una acción. El «nuevo estado» se refiere a una copia del estado existente con las modificaciones necesarias a realizar como consecuencia de la acción. No esta pensado, o al menos no se deberia, para realizar llamadas a servicios o cosas similares puesto que para ello están los mas que convenientes Efectos.

Accion

Una Acción es un evento que disparamos en nuestros componentes por la que solicitamos un nuevo estado como consecuencia de un evento de nuestro componente o de una acción del usuario.

Efecto

Un efecto se produce al necesitar una acción acceder a recursos externos, como un servicio, para poder acceder a la información que conformará el nuevo estado.

La mecánica es simple. Un componente se suscribe a la información que necesita del store a través del subscribe del Store, donde se le notificarán los cambios a medida que se generen. Por otro lado, y en algun momento de la ejecución del componente lanzará una accion a traves de un método del Store llamado dispatch, al que pasara los parámetros necesarios.

La Acción básicamente es una clase que implementa un determinado interfaz que contiene un campo que sirve para dar un nombre unico a la accion. Si se ha definido un Efecto para dicha accion este se ejecutara primero y como regla general terminara llamando a una acción para el éxito del efecto o a otra para el fallo del efecto y que generalmente no tienen efectos. Si no se ha definido efectos para la accion, esta le llega al reducer, que es un gran bloque switch, en el que para cada acción se retorna un nuevo estado pasando este nuevo estado a ser el estado actual.