Te mostramos cómo usar Redux en una aplicación Angular

Redux se define como una biblioteca JavaScript de código abierto que funciona para administrar y centralizar el estado de una aplicación. Cuando se combina con Angular y React, se hace con la intención de construir interfaces de usuario, similar a la arquitectura Flux de Facebook.

Ahora, veamos un poco cómo es el funcionamiento de Redux con Angular. Para lograrlo, se debe utilizar la librería Ngrx, esta proporciona los componentes necesarios para implementar con éxito este patrón y la gestión de estados.

Elementos de la implementación de Redux con Angular

Component

Los componentes en Angular son los elementos que preparan los datos para una determinada vista en la aplicación que se está desarrollando. Esta es la manera en la que Angular estructura un proyecto, consta de archivo Typescript que actúa como un controlador y una vista HTML. Se sigue el patrón Model-View-Controller (MVC).

State

Es donde se almacenan los datos de la aplicación. Por lo general, el estado se tiene modularizado en varios modelos, como el modelo Usuario o un modelo Rol, reflejando distintos modelos de datos que la aplicación va a necesitar. En resumen, es la información que se mostrará al usuario de la aplicación pero organizada en el Store.

Action

Para realizar cualquier cosa, un componente va a desencadenar una acción, como por ejemplo al pedir un listado de usuarios o modificar un registro, el componente va a notificar al Store que quiere llevar a cabo esa acción despachando esta Action y luego, el Store se encarga de realizar las operaciones necesarias para llevarla a cabo.

Reducer

Hay que recordar que la aplicación tiene un estado inmutable, esto implica que al cambiar algún dato lo que se hace es sustituir el estado por uno nuevo que incorpora los cambios. Debido a esto, existen los Reducers, que son funciones para sustituir el estado de la aplicación por uno nuevo.

Effect

Cuando hablamos del Effect nos referimos a una función asociada a una Action que nos ayudará a realizar las tareas auxiliares que necesitemos. Este es un elemento que le brinda al desarrollador flexibilidad cuando debe gestionar el flujo de datos.

Cómo se obtienen los datos con Redux

Luego de explicados los componentes, procedamos a ver un ejemplo sobre la interacción entre ellos y la secuencia que se origina:

• La función ngOnInit de nuestro componente despachará una action, por ejemplo getUserList().
• La Action getUserList no puede cambiar el store por si sola. Esta primera action solicita la información al API que corresponda y no tendrá asociado un reducer si no un effect.
• Este effect pedirá al servicio de comunicación la información que corresponde al API que la contenga y luego espera recibir respuesta.
• Mientras todo este proceso ocurre, la vista tendrá unos valores para estos users en el store, ya sean los últimos usuarios o una serie de valores por defecto.
• De vuelta al effect, cuando este recibe la información del servidor, se pueden presentar dos escenarios: recibir a los usuarios de forma correcta o recibir un error desde el servidor. En función de la respuesta que reciba, se despachará una acción u otra dentro del efecto.
• Cuando se llega a este punto, todas las acciones, dependiendo de la respuesta, tendrán un reducer asociado a ella que puede modificar el store en varias maneras.
• Esto da como resultado el cambio en el estado de la aplicación, dado que el reducer creó un nuevo estado sustituyendo al anterior.
• La vista, suscrita al estado mediante un observable, recibirá los cambios en el store en tiempo real. 

Vale recordar que Redux no acelera la obtención de datos, pero permite controlar, organizar y mantener los datos que la aplicación utiliza de forma muy eficiente. 

En Rootstack tenemos un equipo desarrollador Angular ideal para cualquier proyecto donde necesites hacer uso de esta funcional tecnología. Contáctanos para que uno de nuestros expertos te explique todos los beneficios de trabajar con nosotros y así puedas aumentar la productividad de tu empresa. 

Te recomendamos en video