Introducción al Manejo de Estado con NgRx
Comprendiendo la necesidad de la gestión de estados en las aplicaciones Angular
¿Qué es el estado en una aplicación web?
Según la RAE, estado significa:
Situación en que se encuentra alguien o algo, y en especial cada uno de sus sucesivos modos de ser o estar.
Si extrapolamos esta definición al ámbito de desarrollo de aplicaciones web, podemos decir que el estado representa la situación actual de la aplicación en un momento dado, además este estado puede cambiar y evolucionar a lo largo del tiempo según determinadas acciones o condiciones, representando cada uno de estos cambios en la aplicación. Otra manera de decirlo es, el estado es una foto dinámica que capta la información del sistema en un punto específico.
Siendo un poco más técnicos, el patrón de diseño Redux (patrón que utiliza NgRx) nos dice que:
El estado es la instancia de un objeto que almacena la información de un componente y define el comportamiento del mismo.
Vamos a poner un ejemplo, imagina que tenemos una aplicación para gestionar nuestros libros, donde podemos marcar libros como leídos, añadir nuevos o eliminar libros que hemos regalado. Esta colección de libros sería nuestro estado.
Pero un estado puede ser algo más abstracto como podría ser el enrutamiento y navegación de una aplicación, en este caso podríamos almacenar la url y sus parámetros que se actualizan tras las acciones de navegar a otra página.
¿Por qué necesito gestionar el estado?
Vale Rodri, ya me queda claro qué es el estado, es simplemente la información que tiene un componente ¿por qué necesitaría gestionarlo?
Realmente el problema no es el estado, sino más bien el contexto del estado, en dónde se utiliza. Seguramente en tus aplicaciones Angular has necesitado compartir información entre componentes y según la composición de la aplicación se te haya facilitado o dificultado. En lo personal, compartir información entre componentes en proyectos grandes me ha dado muchos dolores de cabeza. Vamos a recordar las maneras tradiciones para compartir información:
Ambas maneras suelen ser suficiente para proyectos pequeños con pocos componentes y mantenido por pocos desarrolladores, pero a medida que nuestro proyecto crece, más pronto que tarde nos daremos cuenta que ya no es tan cómodo utilizar inputs y outputs, especialmente cuando tenemos varios componentes anidados, además, disminuye la trazabilidad de la información.
Siendo más técnicos podemos decir que los principales problemas son:
- ❌ Dependencias no deseadas: cuando utilizamos inputs y outputs los componentes deben estar relacionados, es decir, si tenemos el componente A (vamos a llamarlo el abuelo), que contiene al componente B (el hijo del abuelo) y a su vez el componente B contiene a al componente C (el nieto del abuelo), si el abuelo (componente A) quiere comunicarse con su nieto (componente C), tendrá que hacerlo mediante su hijo (componente B).
- ❌ Dificultad en el rastreo de datos: en una jerarquía de componentes compleja, trazar cómo se pasan y modifican los datos puede volver cuanto menos tedioso.
- ❌ Reducción de reusabilidad: la reusabilidad suele ir relacionada con una alta abstracción, pero cuando los componentes depende en exceso de los datos especificados a través de inputs y outputs pueden perder esa abstracción y flexibilidad.
Es verdad que los servicios pueden solventar estos problemas abstrayendo las operaciones relacionadas al estado, pero sería nuestra responsabilidad definir una estrategia concisa y robusta para el almacenamiento y consumo de esta información, pero ¿por qué reinventar la rueda?
Aquí es donde NgRx aparece.
¡Un NgRx salvaje ha aparecido!
Según la pokédex:
NgRx es un framework para construir aplicaciones reactivas en angular brindando librerías para:
- Manejo global y local del estado
- Aislar los “efectos secundarios” (side effects)
- Manejo de colección de Entidades
- Integración con el router de Angular
- Herramientas de desarrollo que mejoran la experiencia del equipo de desarrollo.
En otras palabras, NgRx nos ayuda a mantener la información organizada y contenida en un contexto global o local, permitiendo aislar el manejo del estado de los componentes. Además, NgRx nos brinda una arquitectura para que todos trabajemos de manera uniforme, para que todos podamos remar en la misma dirección y todos podamos hablar el mismo idioma.
NgRx se compone de 4 módulos principales:
- Store: Almacena el estado.
- Actions: Representa cambios o eventos en el estado.
- Reducers: Actualizan el estado en respuestas a las acciones.
- Selectors: Extraen información del estado.
Vemos un ejemplo:
Imagina que quieres organizar una fiesta, para ello necesitas conocer la lista de invitados, el menú, playlist, etc.
Para mantener esta información organizada y actualizada, contratas a un asistente.
Este asistente (NgRx) se encarga de transmitir toda esta información (estado) a los invitados (componentes). Estos invitados se comunican (mediante acciones) con el asistente para confirmar o rechazar la invitación. El asistente al recibir este mensaje actualiza la lista de invitados (mediante reducers).
Espero que te guste el ejemplo porque… ¡Será la aplicación que desarrollaremos a lo largo del curso! En este proyecto iremos aplicando todos los conceptos según los vayamos aprendiendo. ¿Te interesa? ¡Pues acompáñame a ver 🎉Ng Party Planner🎉!