Video Summary and Transcription
Recoil es una biblioteca de gestión de estado mínima y fácil de aprender para React y React Native. Admite la definición de estado distribuido e incremental, suspense de React y proporciona hooks como useRecoilValue y useRecoilState. Recoil se puede utilizar en aplicaciones tanto de React como de React Native, lo que permite reutilizar fácilmente las configuraciones de estado. La prueba de Recoil es sencilla, con la capacidad de observar cambios de estado y comparar instantáneas. En general, Recoil es una alternativa experimental pero prometedora a Redux.
1. Introducción a Recoil y la gestión de estado
¡Hola! Bienvenidos a React Advanced. Hoy hablaré sobre cómo usar Recoil en React y React Native. Discutiré el problema de la gestión de estado en React, los tipos de estado y las soluciones populares para la gestión de estado. Luego explicaré los conceptos básicos de Recoil, su uso en el programa ADHD y cómo probar los átomos y selectores de Recoil. También tocaremos el tema del almacenamiento en caché con Redux y GraphQL.
Bienvenidos a React Advanced. Mi nombre es Sergiy y hoy me gustaría hablar sobre cómo usar Recoil en React y React Native. Un poco sobre mí. He estado trabajando como desarrollador web durante más de 10 años, trabajo con diferentes tecnologías en diferentes industrias, trabajo con tecnologías de backend y frontend, pero en los últimos años he trabajado principalmente con React y realmente me gusta. Soy realmente un fanático de Javascript y de diferentes frameworks de Javascript, pero como dije, me gusta React en particular.
Y ¿cuál es el plan para la charla de hoy? Me gustaría comenzar compartiendo algunos aspectos sobre el problema de la gestión de estado en React y las soluciones populares para la gestión de estado. Luego compartiré los conceptos básicos de Recoil y cómo funciona, luego hablaré un poco sobre el programa ADHD y por qué necesitamos Recoil allí, y también hablaré un poco sobre cómo probar los átomos y selectores de Recoil.
Entonces, sobre el problema de la gestión de estado en React. En todas nuestras aplicaciones tenemos estado y todos sabemos que generalmente tenemos algunos problemas para gestionarlo. ¿Por qué tenemos esos problemas? Creo que tenemos problemas porque tenemos diferentes tipos de estado, tenemos muchas bibliotecas y enfoques para la gestión de estado, y también tenemos diferentes plataformas como React y React Native. Esto hace que el problema sea un poco complejo. En primer lugar, me gustaría hablar sobre los tipos de estado. Para estar en la misma página. ¿Por qué me gustaría hablar de esto? Porque dependiendo del tipo de estado con el que estemos tratando en este momento, podemos seleccionar la mejor herramienta que necesitamos para este tipo de estado. El estado más simple es el estado local de un componente. Y creo que todos sabemos cómo gestionar esto. Hoy en día, podemos gestionar el estado local tanto en componentes basados en clases como en componentes funcionales, gracias a los Hooks. El siguiente tipo de estado es el estado compartido de un componente. Cuando tenemos algunos datos que necesitamos usar en diferentes componentes, generalmente seleccionamos un componente padre y movemos o elevamos el estado compartido a este componente y luego pasamos los datos a través de props. También podemos tener un estado global de la aplicación. El estado global es algún dato que tenemos a nivel global para nuestra aplicación y que usamos en diferentes componentes en diferentes niveles de nuestra aplicación. Parte de este estado puede ser un estado de interfaz de usuario (UI). El estado de la interfaz de usuario es un estado que usamos para almacenar datos que describen qué y cómo nos gustaría mostrar. Por ejemplo, tal vez qué tema usamos, qué colores, qué fuentes y qué tamaños de estas fuentes. Bien, y otra parte es la caché. La caché es bastante importante, pero cuando necesitamos la caché, la mayoría de nuestras aplicaciones hacen llamadas a API. Y cuando recuperamos algunos datos, generalmente queremos almacenarlos en caché para mejorar la experiencia del usuario. Cuando navegamos entre pestañas o entre diferentes páginas de nuestras aplicaciones, muy a menudo podemos capturar los datos y no volver a obtenerlos una y otra vez. Y por cierto, menciono Redux y GraphQL aquí como posibles soluciones, porque Redux y GraphQL son realmente buenos para la caché. Y por cierto, según lo que sé aquí en React Advanced, también habrá una charla sobre la caché de GraphQL, y estoy seguro de que será increíble.
2. Comparación entre Redux y Recoil
¿Qué hay de Redux? ¿Puede Recoil reemplazar a Redux? Recoil es una biblioteca de gestión de estado para React. Es minimalista, similar a React y tiene una curva de aprendizaje fácil. Es una API sin plantillas y admite la definición de estado distribuido e incremental. Recoil también admite React suspense.
Y me gustaría mencionar que muchas veces cuando aparece un nuevo enfoque para la gestión de estado, mucha gente dice, bueno, entonces Redux morirá. Lo mismo ocurrió cuando se introdujo la API de contexto. Pero Redux está bastante vivo, y francamente, me gusta mucho Redux y estoy observando cómo evoluciona. Y he estado preparando una charla sobre Redux y cómo evoluciona, los kits de herramientas de Redux y todo eso.
Pero, ¿qué hay de Recoil? ¿Puede ser un reemplazo para Redux? Y el equipo de React dice que sí. Así que piensan que Recoil puede reemplazar completamente a Redux. Y según tengo entendido, incluso el creador de Redux, Danny Bramow, ¿lo conoces, verdad? Él suele decir que no le gusta Redux. Pero a mí sí me gusta. Pero también me gusta Recoil. Entonces, ¿qué hay de Recoil? Recoil es una biblioteca de gestión de estado para React. Es otra biblioteca de gestión de estado. Pero también es un conjunto de utilidades para la gestión de estado. Recoil nos proporciona un montón de hooks útiles y diferentes funciones de utilidad.
Ten en cuenta que Recoil es un conjunto de herramientas experimentales. Aún no se ha lanzado oficialmente, pero según tengo entendido, ya se utiliza en producción, muy a menudo. Sí, ¿cuáles son las ventajas de Recoil? Dicen que es minimalista y similar a React. Funciona muy bien con React y es minimalista. Pero no pienses que la biblioteca es pequeña. La biblioteca, incluso en comparación con Redux, es bastante grande. Pero minimalista significa que solo necesitamos un poco de código para comenzar a trabajar con Recoil. Tiene una curva de aprendizaje fácil. Podemos comenzar solo con átomos y selectores, y eso es todo. Es tan fácil. Además, es una API sin plantillas. Cuando la gente dice que no le gusta Redux, generalmente dicen que necesitas escribir mucho código para mantener el estado de Redux. Y Recoil también admite la definición de estado distribuido e incremental. Otra ventaja de Recoil es que podemos escribir nuestro sistema de gestión de estado como uno distribuido. Los átomos pueden estar distribuidos. Esto generalmente ayuda con la división de código, por ejemplo. Y Recoil también admite React suspense.
3. Introducción a Recoil y la aplicación ADHD MyWay
Recoil es una biblioteca de gestión de estado para React. Es minimalista, similar a React y tiene una curva de aprendizaje fácil. Es una API sin plantillas y admite la definición de estado distribuido e incremental. Recoil también admite React suspense. ADHD es una organización y proyecto sin fines de lucro que ayuda a estudiantes con TDAH a obtener educación de manera más adecuada. Empresas como Amazon han apoyado el programa ADHD America. En nuestra aplicación de React, utilizamos Recoil para la gestión de estado. Podemos definir átomos y selectores para gestionar el estado de la aplicación. Recoil proporciona hooks como useRecoilValue y useRecoilState para leer y actualizar el estado. Para usar Recoil, debemos envolver nuestra aplicación en RecoilRoot. Recoil también admite la observación de eventos mediante el componente RecoilObserver.
Entonces, ¿qué es Recoil? He creado esta fórmula simple. Recoil es átomos más selectores más hooks más utilidades. ¿Qué son los átomos? Los átomos contienen la fuente de verdad para el estado de nuestra aplicación. Comparando con Redux, es como rebanadas de nuestro estado. ¿Y qué son los selectores? Los selectores representan una parte del estado derivado. Aquellos que solían usar Redux en sus aplicaciones, creo que ya usaron Redux y bibliotecas como reselect. Así que esta es una característica bastante similar.
¿Qué hay de ADHD? ADHD es una organización y proyecto sin fines de lucro. Fue iniciado por estudiantes que tenían TDAH y decidieron que los estudiantes que tienen TDAH necesitan ayuda para obtener educación de manera más adecuada. Así que decidieron hacer algo al respecto. Y empresas como Amazon, en realidad Amazon Web Services, decidieron ayudar a los estudiantes con esto. Entonces, un grupo de voluntarios de todo el mundo, junto con gerentes profesionales y desarrolladores de AWS, todos ayudamos al programa ADHD America a desarrollar la aplicación ADHD MyWay que debería ayudar a los niños a obtener educación de manera más adecuada y resolver problemas que tienen. En ADHD MyWay desarrollamos React y React Native, por lo que es una aplicación móvil, y pedí que se mostraran algunas diapositivas de la propia aplicación, y por cierto, aquí podemos ver un panel de control que los padres o maestros usarán, y también desarrollamos una aplicación móvil, y la aplicación móvil será utilizada principalmente por los niños, perdón, los niños. Y a la generación joven le gustan las aplicaciones móviles, sí, así que decidimos implementar exactamente una aplicación móvil. Y un momento interesante es que nuestro diseño, el diseño inicial, fue creado en Hackathons por estudiantes también. Entonces, en nuestra aplicación de React comenzamos a usar Recoil. Y aquí es cómo podemos usar Recoil en nuestro estado de vista de inicio de sesión, por lo que podemos ver que el estado de vista de inicio de sesión es solo un átomo simple. El átomo Key debe ser único. Y otra propiedad es una propiedad predeterminada, donde tenemos el estado de inicio de sesión inicial. Puede ser cualquier objeto de la porción de estado que crees para tu aplicación. Entonces aquí podemos ver algunos campos como nombre de usuario, contraseña, error de nombre de usuario y todo eso. Luego podemos usar este estado aprovechando el hook de Recoil useRecoilValue. Usamos useRecoilValue cuando solo necesitamos leer el estado y no queremos cambiarlo. Cuando queremos cambiar el estado de recoil, entonces usamos useRecoilState. Es bastante similar al hook useState de React. Por cierto, para usar Recoil, átomos de recoil y hooks, debes envolver tu aplicación en RecoilRoot. RecoilRoot proporcionará todos los contactos requeridos para todos nuestros componentes y así nuestros componentes podrán conectarse y suscribirse a las actualizaciones del almacenamiento. Por cierto, aquí, cuando usamos el hook useRecoilValue, no solo leemos el valor del estado sino que también nos suscribimos a los cambios de estado y cuando este estado se actualiza entonces todos los componentes que estaban suscritos a las actualizaciones también se actualizarán. Es genial ¿Qué hay de la observación de eventos? Aquí puedes ver que agregamos el componente RecoilObserver y en realidad es nuestro experimento sobre el uso de un patrón de observador para notificar
4. Recoil: Gestión de Estado y Pruebas
Recoil es una biblioteca simple y potente de gestión de estado para React y React Native. Proporciona selectores para leer y modificar el estado, admite operaciones síncronas y asíncronas, e integra bien con React suspense. Recoil se puede utilizar tanto en aplicaciones de React como de React Native, lo que permite reutilizar fácilmente las configuraciones de estado. Las pruebas de Recoil son sencillas, con la capacidad de observar los cambios de estado y comparar instantáneas. En general, Recoil es una alternativa experimental pero prometedora a Redux.
todos los observadores que ha ocurrido alguna acción. Es bastante simple. Creamos un sujeto básico donde adjuntamos todos los observadores y utilizamos el método notify en este sujeto básico y notificamos a cualquier observador que ha ocurrido alguna acción, pero solo si el observador tiene el mismo tema. ¿Qué es el tema? El tema es simplemente una cadena simple, puedes verlo aquí, y es muy similar a los tipos de acción de Redux.
Selectores. Por supuesto, una de las grandes cosas de Recoil son los selectores, por lo que no necesitamos una biblioteca adicional de terceros, podemos usar los selectores tal cual, y como dije antes, los selectores representan el estado derivado. Podemos simplemente leer el estado o podemos leer y modificar algunos datos, por lo que podemos filtrar algo. Además, una gran ventaja aquí es que los selectores pueden ser síncronos y asíncronos, y es algo realmente bueno, y también se integra muy bien con React suspense. ¿Qué hay de la aplicación de React Native? Aquí puedes ver el estado de la vista de inicio de sesión para React Native, y es totalmente igual que el que usamos en la aplicación de React. Esto nos permite reutilizar toda la configuración de estado para las funciones de inicio de sesión, registro, olvido de contraseña y todo eso. Y luego podemos usarlo fácilmente en nuestra navegación, por ejemplo. Puedes ver que también usamos useRequireValue para obtener los datos y suscribirnos a las actualizaciones del estado. Lo mismo que necesitamos usar recoil route aquí también.
Antes de pasar a pruebas de recoil, me gustaría compartir un poco sobre la reutilización de la gestión de estado, en esta situación la gestión de estado con recoil en React Native. Tuve una buena experiencia moviendo características de estado compartido a una biblioteca separada, pero fue con Redux y ahora tenemos la idea de dividir lo mismo, quiero decir, extraer la gestión de estado que tenemos en las aplicaciones de React y React Native en una biblioteca separada y ya comenzamos a trabajar en esto, por lo que creamos una biblioteca que contendrá todos los átomos de recoil y también los selectores, todo lo que necesitamos para la función de inicio de sesión y autorización y todo eso, sí al menos extraemos una parte del estado sobre esas características que mencioné pero también continuamos buscando qué más podemos reutilizar sobre pruebas. Probar recoil es algo bastante sencillo, así que primero, recuerda usar recoil root en tus pruebas porque, por supuesto, necesitas envolver tu componente o aplicación con recoil root porque sin esto tendrás un error y primero, si necesitas probar algún componente de react, es decir, probar el átomo de recoil, me refiero al estado de recoil dentro del contexto del componente de react, entonces puedes usar el patrón de observador de recoil, no es parte de las utilidades de recoil, puedes crear un observador de recoil similar y luego puedes usarlo de esta manera y simplemente cambiar el estado y luego puedes observar qué estado se cambió y qué se cambió y y a veces necesitas probar tus selectores fuera del contexto de los componentes de react, por lo que puedes usar snapshot unstable. No estaba disponible en las primeras versiones de recoil, pero ahora está disponible y puedes generar instantáneas y luego puedes comparar el estado antiguo con el estado nuevo.
Entonces, un pequeño resumen. Recoil es una herramienta realmente buena pero aún experimental. Recoil se puede utilizar en react y react native. Antes, Redux era una herramienta muy famosa para aplicaciones de react native, pero hoy creo que ya tenemos una muy buena alternativa. Recoil es muy fácil de probar dentro de los contextos de react y fuera de ellos. Y en realidad me gusta mucho esta herramienta y es posible que en unos años realmente pueda reemplazar a Redux. ¿Qué opinas de esto? He compartido algunos enlaces aquí para que puedas consultar la documentación de recoil, es realmente buena y los autores de sus bibliotecas también han creado algunos videos de introducción sobre recoil y en los recursos de recoil.js puedes encontrar un enlace a un recurso bastante interesante sobre recoil, así que se creó un curso al respecto y es gratuito también estoy compartiendo un enlace al programa dhd america y un enlace a mi github donde planeo agregar el código simplificado, serán las mismas funcionalidades que usamos en react y react native en dhd pero por supuesto será simplificado y todos los datos relacionados con nuestro proyecto se eliminarán porque no proporcionamos nuestro código al público, al menos aún y gracias
Comments