Sube de nivel el manejo de tu estado en React: ¿Por qué Zustand te ayuda a administrar el estado como un profesional en lugar de Redux?

Rabah Ali Shah

Seguir

Escuchar

La gestión de estados es una de las partes más desafiantes al crear una aplicación a la que todo desarrollador debe enfrentarse. Sin duda, este problema se puede resolver utilizando algunos React Hooks, pero administrar el estado puede ser cada vez más complejo en aplicaciones más grandes. En tales casos, no podemos simplemente confiar en ganchos de React muy comunes como useState y useReducer, etc. Dado que cada biblioteca ofrece una solución para un problema particular. En el caso de React y para una gestión de declaraciones más compleja, Dan Abramov introdujo una biblioteca llamada Redux.

Redux viene con un concepto sorprendente de tienda centralizada que está disponible de forma independiente en toda su aplicación React. Este concepto ayuda al desarrollador a no preocuparse por obtener el estado actual de un componente o manipularlo. Todo lo que necesita hacer es ajustar la tienda en el proveedor en el nivel superior de su aplicación React y las funciones de importación usando algunos ganchos Redux en los componentes donde desea leer el estado actual o manipularlo.

Creando la tienda Redux:

Así es como se crea una tienda Redux que contiene estados iniciales, funciones reductoras o acciones que queremos realizar en nuestros estados para actualizar sus estados actuales. Para este caso, esta tienda en realidad contiene toda la lógica para un contador simple que suma o resta valores haciendo clic en el botón "Incrementar" o "Decrementar" respectivamente.

Una vez que hayamos creado nuestra tienda, es el momento de vincularla con nuestro componente React:

Además de nuestra aplicación en el archivo index.js, le proporcionamos la tienda Redux. En palabras simples, declaramos nuestra tienda en el nivel superior de nuestra aplicación React para que su estado esté disponible para todos sus elementos secundarios.

Ahora vamos al archivo donde queremos usar nuestra Tienda Redux:

Necesitará el gancho useSelector para obtener los datos de la tienda Redux y luego, usando el gancho useDispatch, podrá llamar a la acción para actualizar su estado.

Así es como se gestionan los estados en Redux.

El problema que quizás hayas notado es el largo texto estándar de Redux. Incluso para administrar lógicas tan simples, debe configurar todo el texto estándar de Redux mencionado anteriormente. Y a veces se vuelve complejo entender qué está pasando con Redux porque para obtener los datos necesitas un gancho useSelector adicional y para llamar a tu acción necesitas un gancho useDispatch. Lo cual resulta complicado de usar en aplicaciones más grandes donde la gestión estatal es mucho más compleja.

La solución a este problema es Zustand. Esta es una solución de gestión de estado de React pequeña, rápida y escalable que utiliza principios de flujo simplificados. Zustand viene con el mismo concepto de tienda centralizada que administra su estado y está disponible en toda su aplicación.

Lo mejor de Zustand es que, a diferencia de Redux, no es necesario configurar un texto estándar largo ni utilizar ganchos adicionales para leer, llamar y manipular estados. Todo lo que necesitas es crear una tienda y usarla en cualquier lugar de tu aplicación React. No es necesario incluir a su proveedor en el nivel superior de la aplicación.

Creando almacén de condiciones:

Vea lo sencillo que es crear una tienda en Zustand. Simplemente usando la función de creación. Una vez que hayas creado tu tienda con Zustand. Es hora de vincularlo con su componente donde desea leer datos de su tienda.

Así es como vas a llamar a tus funciones reductoras, las llamadas acciones. Simplemente importa tu acción y llámala. ¡Eso es todo! NO HAY NECESIDAD de ganchos adicionales para leer y enviar acciones. Simplemente impórtalos y úsalos.

Espero que después de ver todo el código anterior, la simplicidad de Zustand y su comparación con Redux tengas tu respuesta, pero a continuación te presentamos algunas ventajas que obtendrás al usar Zustand.

La gestión de estados puede resultar un desafío en aplicaciones más complejas y de mayor tamaño. Sin duda, Redux y ganchos como useContext y useReducer están aquí para ayudarnos. Pero el problema es la larga y compleja configuración repetitiva que hace que Redux sea menos fácil de usar al administrar estados.

Aquí llega Zustand, una solución de gestión de estado pequeña, rápida y escalable para aplicaciones React. Su simplicidad, su configuración menos repetitiva y sus comportamientos de gestión de estado fáciles de usar lo hacen más favorable que Redux. Siéntete libre de utilizar Zustand en tu producción y disfruta de la belleza de gestionar estados de una manera limpia y sencilla.

Sin duda, Redux es muy popular y se ha utilizado más que Zustand en producción. Pero aún así, si está buscando una solución para administrar estados igual que Redux pero con una configuración menos repetitiva y una solución de administración de estados más simple, Zustand sería la mejor opción. Esta es la razón por la que Zustand se está volviendo popular entre los desarrolladores y están enamorados de usarlo. Debe intentarlo.

Muchas gracias por leer hasta aquí. Espero que encuentres este artículo informativo y útil. En caso afirmativo, compártelo con tus amigos. Si desea mantenerse actualizado con las últimas tecnologías y tendencias de la industria, sígueme en X/Twitter y conéctese conmigo en LinkedIn. Publico una gran cantidad de contenido informativo y de aprendizaje relacionado con la programación y las últimas tecnologías.