Creamos una guía en español sobre el uso de Redux en apps ReactJS ⚛️
Desde el principio
Algunos Frameworks de front-end como React, Angular, o Vue, tienen un sistema de componentes donde cada uno gestiona internamente sus propios estados, y por supuesto, a medida que la aplicación se vuelve compleja, su gestión de estados también se vuelve compleja.
Y ese es el problema común que enfrentan los desarrolladores: esa complejidad y falta de gestión eficiente en el estado en las aplicaciones, misma que lleva a la necesidad de Redux.
Redux en 2 minutos
TALK DE LA SEMANA
Explicación ¿Por qué existe Redux? Ejemplo
Imagina que estás jugando un videojuego en el que controlas a un personaje. El personaje tiene diferentes atributos, como salud, nivel, puntos de experiencia y equipamiento o ítems.
En cada componente del juego, tendrías que pasar todos los atributos del personaje como props a lo largo de la jerarquía de componentes y si alguno de los atributos cambia, tendrías que actualizar manualmente todos los componentes relacionados.
Sin embrago, usando Redux puedes almacenar todos los atributos del personaje en un estado centralizado, es decir, cada componente puede suscribirse a los cambios relevantes en el estado y recibir actualizaciones automáticamente.
👉🏻 Si, por ejemplo, la salud del personaje disminuye, solo tienes que actualizar ese valor en el estado de Redux y todos los componentes que dependen de la salud se actualizarán automáticamente.
¡Redux ha sido la solución a este problema!
En este caso, Redux actúa como una especie de almacén de atributos o tienda, la llamada "Store" es centralizada para el personaje del juego, simplificando la gestión del estado y garantizando que todos los componentes estén sincronizados.
¿Por qué y cuándo debo usar Redux?
Deberías considerar usar Redux cuando tienes una aplicación con un estado complejo y/o que necesita compartir datos entre varios componentes, ya que como explicamos antes Redux brinda una estructura y un flujo de datos unidireccional lo que facilita esa sincronización de componentes.
¿Y cuándo NO usar Redux?
No necesitas Redux donde el estado se puede gestionar fácilmente, usualmente son apps más simples o pequeñas con los propios componentes de React. Así que, si tu aplicación no tiene una gran cantidad de datos compartidos o no requiere un seguimiento estricto del flujo de datos, es posible que Redux sea innecesario y podría agregar complejidad innecesaria al código.
En resumen, utiliza Redux cuando tu aplicación requiera compartir datos entre componentes. No uses Redux si tu aplicación puede manejar el estado con propios componentes de React.
¿Cuáles son las desventajas de Redux?
Como Redux se usa principalmente para la gestión del estado de las aplicaciones funciona como una especie de "almacén" principal alojando a todos los estados de la aplicación. Sin embargo, cuando este almacén necesita ser optimizado, la configuración requiere, en algunos casos, mucho código repetitivo. Además, algunos otros paquetes necesarios que permitan dicha la escalabilidad.
Lo bueno, es que para hacer frente a estos desafíos, el equipo de Redux creó Redux Toolkit, que acelera con muchas configuraciones de mejores prácticas para los principiantes de Redux o los desarrolladores de Redux que quieren un código simple, rápido y limpio.
Redux técnicamente mantiene el estado de una aplicación completa en un solo árbol de estado inmutable (objeto), que no se puede cambiar directamente. Cuando algo cambia, se crea un nuevo objeto (usando acciones y reductores).
Pero de todo esto hablarémos en el siguiente blog, un ¡Tutorial de Redux para tus React Apps!
¡Gracias por leer!
📍 Conecta con nosotros en Instagram 👇