Redux es una biblioteca de JavaScript que se utiliza para gestionar el estado de las aplicaciones web. El estado es la información que se almacena en la memoria y que determina el comportamiento y la apariencia de la interfaz de usuario. Con Redux, se puede crear una única "fuente de verdad" para el estado, que se llama el store, y que se puede modificar mediante acciones y reductores. De esta manera, se puede tener un control total sobre el flujo de datos y evitar problemas de sincronización o inconsistencia.

Si desarrollas interfaces de usuario con React, sin duda habrás usado Redux y, en cualquier caso, debes conocerlo bien, porque es lo que más se utiliza en este tipo de aplicaciones.

Sí, Redux es la biblioteca de gestión de estado más popular y es muy potente, pero también tiene algunas importantes desventajas que podrían hacerte considerar otras alternativas.

En este artículo vamos a ver Redux y otras 4 opciones menos conocidas, con sus pros y sus contras, para que tengas mejor información a la hora de gestionar el estado de tus aplicaciones.

Por supuesto, esto no significa que Redux sea una mala opción o que no tenga muchas ventajas. Todo depende del tipo de aplicación que estés desarrollando, de tus preferencias personales y de tu nivel de experiencia. Lo importante es que conozcas las diferentes opciones que existen y que elijas la que mejor se adapte a tus necesidades.

Redux

Redux, como ya hemos comentado en la introducción, es un contenedor de estado predecible para aplicaciones JavaScript. Te ayuda a administrar el estado global de la aplicación y suele utilizar casi siempre en combinación con React, aunque también se podría utilizar con otros frameworks si quisiésemos. Redux sigue el patrón de arquitectura Flux, que impone un flujo de datos unidireccional y promueve el uso de conceptos de programación funcional.

Acerca de Flux: para dar soporte al concepto de flujo de datos unidireccional que impone React (por ejemplo, en Angular es bidireccional), se desarrolló la arquitectura Flux como una alternativa a la popular arquitectura modelo-vista-controlador (MVC). Flux presenta acciones que se envían a través de un despachador central a un almacén de estados, y los cambios en el almacén se propagan de nuevo a la vista. Cuando se usa con React, esta propagación se logra a través de las propiedades de los componentes. Se podría considerar una variante del patrón Observer. Con el tiempo, Flux ha sido reemplazado por bibliotecas como las que analizamos en este artículo.

Pros de Redux:

• Biblioteca madura y ampliamente adoptada, con una comunidad sólida y un excelente ecosistema de herramientas, middleware y complementos que te facilitan la vida.
• Actualizaciones de estado predecibles y fáciles de depurar debido a su estricto flujo de datos unidireccional, lo que hace fácil entender y depurar los cambios de estado. Esto puede ser una gran ventaja en aplicaciones muy grandes.
• Fomenta la separación de intereses (Separation of Concerns, SoC) y la arquitectura modular mediante acciones, reductores y almacenamiento. Esto mejora el mantenimiento de nuestras aplicaciones, sobre todo si son grandes.
• Facilidad para hacer testing, ya que utiliza funciones puras para las actualizaciones de estado, lo que facilita el testing de la lógica de la aplicación.
• Es apropiado para aplicaciones grandes y con necesidades complejas en lo que respecta a la gestión del estado.

Contras de Redux:

• Tiene una curva de aprendizaje alta comparada con otras opciones, y requiere seguir ciertas convenciones y patrones que pueden resultar complejos.
• Puede llevarnos a usar código repetitivo, haciéndolo más complejo y detallado para aplicaciones simples.
• Puede provocar problemas de rendimiento si no se usa correctamente.
• Puede dificultar el uso de algunas características de React, como los hooks o el contexto, que ofrecen formas más simples y nativas de gestionar el estado local o compartido entre componentes. Por lo que, a lo mejor, no es lo óptimo para aplicaciones pequeñas que, además, requieran de actualizaciones rápidas y frecuentes del estado global. Hasta uno de sus creadores, Dan Abramov, ha manifestado esto públicamente que quizá no lo necesites (en todos los casos).

MobX

MobX es una biblioteca de gestión de estado reactivo para aplicaciones de JavaScript que se centra en la simplicidad y la escalabilidad. Utiliza estructuras de datos observables para rastrear automáticamente los cambios y actualizar la interfaz de usuario de manera eficiente. MobX también es independiente del framework, por lo que se puede usar con cualquier biblioteca Web de interfaz de usuario, no solo con React.

La ideas que usó su creador, Michel Weststrate, al escribirlo son: escribir el mínimo código posible y sin "fontanería" (como sí tiene Redux), propagar los cambios de manera más fácil y automática a donde se necesiten, generar una renderización óptima de los componentes sin que tengas que preocuparte de ello, y dar libertad para diseñar tu arquitectura.

Es muy popular también (aunque a años luz de Redux) y lo usan muchas empresas.

Pros de MobX:

• Más fácil de aprender que Redux si conoces bien los principios de la programación reactiva.
• Mínimo código "de fontanería" (repetitivo), y fácil de configurar, lo que lleva a un código más limpio y fácil de mantener.
• Modelo de programación reactiva que rastrea automáticamente las dependencias y actualiza la interfaz de usuario cuando cambia el estado.
• Excelente rendimiento debido a su observabilidad detallada, y con actualizaciones eficientes de la UI.

Contras de MobX:

• Puede ser difícil de aprender para los desarrolladores que no están familiarizados con los conceptos de programación reactiva.
• Menos predecible y más difícil de depurar en comparación con Redux, ya que usa un estado mutable y permite la manipulación directa del estado.
• Comunidad y ecosistema más pequeños en comparación con Redux.

Zustand

Zustand es una biblioteca de administración de estado pequeña y sencilla para React. Su objetivo es proporcionar una API mínima, mucho más sencilla que Redux, que pasa directamente por crear un único hook para acceder tanto a los datos como a las operaciones sobre el estado. Su enfoque es la simplicidad y la facilidad de uso.

Está teniendo una gran acogida últimamente entre la comunidad de desarrolladores React, y puede ser una buena opción si encuentras tedioso el código repetitivo de Redux y te interesa una solución más liviana y rápida de implementar, sobre todo en aplicaciones pequeñas.

Ventajas de Zustand:

• API mínima y fácil de entender que requiere menos código repetitivo.
• Ligera y flexible, lo que la hace adecuada para aplicaciones pequeñas y medianas.
• Admite acciones asíncronas y middleware "de serie", sin dependencias adicionales.

Contras de Zustand:

• Menos maduro y con menor adopción en comparación con Redux o MobX.
• Puede no ser adecuado para aplicaciones a gran escala con requisitos de gestión de estado complejos.
• Comunidad y ecosistema más pequeños en comparación con bibliotecas más establecidas como las mencionadas.
• Tiene un logo horrendo 😂

Recoil

Recoil es otra biblioteca de administración de estado, relativamente nueva, para aplicaciones React. Al igual que MobX, proporciona un enfoque ligero y rápido, y trata que todo sea lo más similar posible a usar el propio React para administrar el estado global. Los conceptos centrales de Recoil son los "átomos" (piezas de estado) y los "selectores" (funciones puras que derivan datos de átomos).

Ventajas de Recoil:

• Curva de aprendizaje poco pronunciada, con conceptos mínimos a comprender (los mencionados átomos y selectores).
• API simple e intuitiva que hará que pienses que estás usando el hook useState de React.
• Ofrece un enfoque más granular y similar a React para la administración del estado, lo que puede conducir a un mejor rendimiento en aplicaciones grandes.
• Admite el modo concurrente de React, que es una ventaja significativa para las aplicaciones que requieren un alto rendimiento.

Contras de Recoil:

• Todavía está en fase experimental y puede no ser adecuado para aplicaciones de producción.
• Comunidad y ecosistema mucho más pequeños en comparación con Redux o MobX
• No tiene tantas funciones ni es tan flexible como otras bibliotecas de administración de estado, pero sirve para un gran porcentaje de los casos de uso habituales.

Valtio

Valtio es una biblioteca de administración de estado para React (y para JavaScript "puro"), también relativamente nueva. Aprovecha el poder de los proxies de JavaScript para simplificar la administración de estado. Proporciona una API simple para crear y administrar el estado reactivo en tu aplicación.

Valtio es compatible con varios renderizadores de React, como react-dom (el propio de React), react-native (aplicaciones móviles con React) y react-three-fiber (para renderizar gráficos con three.js).

Curiosamente está creada por los mismos desarrolladores de Zustand, pero con un enfoque radicalmente distinto de manejo del estado.

Pros de Valtio:

• Fácil de configurar y usar, con un código de "fontanería" mínimo.
• Su gestión del estado basada en proxies permite una reactividad selectiva. Es decir, te puede suscribir solamente a las partes del estado que te interesen, y solo las partes relevantes de la vista se actualizarán con los cambios de estado.
• Puede escalar fácilmente para manejar casos más complejos y admite suscripciones al estado desde fuera de los componentes de React.

Contras de Valtio:

• Menos madura y con mucha menos adopción en comparación con Redux y MobX.
• Puede no ser adecuado para aplicaciones a gran escala con requisitos de gestión de estado complejos.
• Comunidad y ecosistema mucho más pequeños que Redux.

En resumen

Cada una de las bibliotecas de gestión de estado que hemos visto tiene su propio conjunto de ventajas y desventajas.

Redux proporciona un sistema de gestión de estado robusto y predecible con un gran ecosistema, mientras que, por ejemplo, MobX es más flexible y requiere menos repeticiones, Zustand es mucho más fácil de aprender o Recoil ofrece un enfoque más granular y más similar a React para la administración del estado, lo que puede darnos mejor rendimiento en aplicaciones grandes.

Al elegir una solución de administración de estado, debemos considerar factores como el tamaño de nuestra aplicación, la complejidad de la gestión que tenemos que abordar y, por supuesto, la soltura y familiaridad que tengamos con cada una de las opciones.

Sin embargo, Redux sigue siendo el "estándar" y algo que debemos conocer si trabajamos con React, aunque optemos por otras posibilidades para ciertas aplicaciones de las que desarrollemos. Quizá sea matar "moscas a cañonazos" en aplicaciones pequeñas, en las que en realidad podríamos limitarnos a usar los hooks nativos de React, pero en aplicaciones más grandes ofrece muchas ventajas. También, cualquier empresa que nos contrate como desarrolladores de React espera que conozcamos Redux, especialmente si vamos a trabajar en un equipo de desarrollo.

Por todo ello, mi consejo sería que aprendas Redux siempre, pero que, además, pruebes con alguna de las otras opciones que te hemos presentado para poder usarlas en aplicaciones más sencillas y sin complicarte tanto la vida. Y, quién sabe, quizá puedas convencer a tu empresa para que se pase a alguna de las otras opciones a medida que las conoces mejor y les ves de primera mano sus ventajas e inconvenientes 😉

¡Espero que te resulte útil!