Reutilizando el estado de la aplicación en React Native con Recoil

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.

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.

¿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

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