Recoil.js: Una nueva biblioteca de gestión de estado para React

Share on linkedin
Share on twitter
Share on facebook
Share on pinterest
Share on email
Share on whatsapp

Recoil.js es una nueva biblioteca experimental de administración de estado de JavaScript de Facebook que aborda muchos de los problemas que enfrentan las aplicaciones más grandes al usar el Context API existente.

Dado que React es principalmente una biblioteca de interfaz de usuario, los desarrolladores a menudo usan una solución de administración de estado junto con React para simplificar el manejo de datos.

Muchas de las soluciones de administración de estado existentes se basan en la arquitectura Flux introducida por React en 2014. Sin embargo, aunque las bibliotecas como Redux y MobX aseguran que el estado de la aplicación se mantenga constante, vienen con una sobrecarga que a menudo es difícil de justificar para muchas aplicaciónes.

Para combatir eso, React introdujo una alternativa simple llamada Context API que permite a los desarrolladores compartir datos a través del árbol de componentes sin tener que pasar accesorios manualmente en todos los niveles.

Recoil.js ofrece una solución para desarrolladores que desean evitar sistemas de gestión de estado completos, o se sienten demasiado limitados por Context API.

Recoil lo hace resolviendo tres problemas con la Context API, como lo indica la documentación oficial:

  1. El estado del componente solo se puede compartir al subirlo al ancestro común, pero esto podría incluir un árbol enorme que luego debe volver a representarse.
  2. El context solo puede almacenar un valor único, no un conjunto indefinido de valores, cada uno con sus propios consumidores.
  3. Ambos hacen que sea difícil dividir en código la parte superior del árbol (donde el estado tiene que vivir) de las hojas del árbol (donde se usa el estado).

Recoil utiliza Atoms y Selectors para administrar los datos de la aplicación. Cada Atom incluye una clave única y una pieza de datos que administrará, mientras que cada Selector representa una pieza de estado derivado que puede basarse en múltiples Atoms.

Un excelente ejemplo de cómo combinar los dos es la popular aplicación de tareas que incluye dos Atoms y un solo Selector.

Para gestionar los datos de la aplicación, creamos dos Atoms. El primero incluye los elementos de la lista sin procesar, mientras que el segundo consiste en el filtro (‘completo’, ‘incompleto’, ‘todos’, etc.).

Para mostrar la lista de tareas, utilizamos un Selector que filtra los elementos de tareas en función del filtro seleccionado.

Para obtener un tutorial completo de la lista de tareas pendientes, así como una buena guía de inicio, diríjase a la documentación oficial.

Recoil se lanza bajo la licencia MIT y está disponible en GitHub.

No olvide que Recoil se considera una solución experimental y podría no estar listo para su uso en una aplicación de producción.

Si quieres aprender más sobre React te dejo mi curso donde te enseñaré a crear APP reales paso a paso.

Puedes encontrar todos mis cursos disponibles en https://agustinnavarrogaldon.com/academy/

Comparte este post con tus amigos

Share on twitter
Share on facebook
Share on pinterest
Share on linkedin
Share on email
Share on whatsapp

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *