Deja de abusar del manejo de estado del cliente

Basta de hablar de mí, hablemos sobre el abuso común de la gestión del estado. Todos hemos estado allí, comenzando una aplicación de React, eligiendo nuestra herramienta favorita de gestión del estado, como Redux o Morbix, u otras muchas disponibles, y conectando nuestros componentes utilizando estas herramientas con la funcionalidad de la API backend y comenzando a utilizar la maravilla de la gestión del estado.

Veámoslo en acción. He creado una sencilla aplicación de React utilizando Code Sandbox, y comenzaré declarando una función de API llamada fetchPokemon, que recibirá como parámetro el nombre del Pokémon, y utilizaremos un servicio de API de Pokémon para obtener los datos relevantes del Pokémon. Lo envolví con una promesa para asegurarnos de que haya una demora en la respuesta y simular un comportamiento común de las funciones de API. Así que hay un setTimeout, y lo configuré para una demora de dos segundos.

Ahora realizaré la obtención de los datos. Tenemos el nombre del Pokémon, manejamos la respuesta, que está en formato JSON, así que utilizaré el JSON y devolveré los datos. Genial. Muy bien. Añadamos la demora de dos segundos de la que hablé, y ahora puedo llamar al punto final en la interfaz de usuario, declarando el estado PokemonData y setPokemonData utilizando el hook useState, y creando una función fetch random Pokemon para que la aplicación no sea aburrida.

Así que elegiré entre tres Pokémon comunes, Pikachu, Charizard y Squirtle. Utilizaremos una lógica aleatoria utilizando la biblioteca math, multiplicando math random por la longitud del array menos 1 y redondeándolo. Y ahora puedo utilizarlo. Llamo a fetchPokemon con el nombre del Pokémon elegido. Genial. Devuelvo los datos. Muy bien. Y ahora viene la mejor parte, la interfaz de usuario. Así que declararé un contenedor div y mostraré los datos del Pokémon en un div y crearé un botón para utilizar la función fetch. En el div, mostraré el nombre del Pokémon, así como su imagen utilizando los sprites de los datos que obtenemos de la API del servicio. Lo pondré en el atributo source de la imagen. ¡Y genial! Volvamos al botón. Adjuntaré la función fetch random Pokemon que implementamos. Y agreguemos un poco de texto. Y agreguemos un texto alternativo para eliminar la molesta advertencia de Code Sandbox. Añadamos un pequeño error tipográfico aquí. Y probémoslo. ¡Genial! Tenemos a Squidward. Ahora agreguemos un poco de estilo, solo para mover el texto un poco hacia arriba.

¡Y hemos terminado! Tenemos a Toysard, Squirtle y Pikachu. ¡Genial! En mi opinión, una aplicación no es una aplicación sin un indicador de carga. Esa es la parte donde la mayoría de los desarrolladores usarán Redux u otra solución para manejar este tipo de estados.

Usaré useReducer por razones de simplicidad, que es muy similar a los reducers de Redux. Así que crearé un Reducer de Pokémon, que recibe un estado y una acción, y cambiará el tipo de acción. Primero, manejemos un caso predeterminado, agreguemos un error y ahora agreguemos el estado común de carga. El estado es de carga, y genial. Pero, ¿qué pasa si obtengo un error? Así que agreguemos un estado para esto también, con los datos de error, y seguramente necesitamos un estado de éxito para almacenar los datos obtenidos de la API del servicio. Y como a veces no estaremos en ninguno de estos estados, agreguemos un estado inactivo y declaremos un estado inicial para comenzar.

Ahora puedo usarlo en la aplicación, en lugar del useState regular. Así que extraigamos el estado y la función de despacho del reducer, usando el PokémonReducer y el estado inicial. Y adaptemos la interfaz de usuario para usar nuestra nueva variable de estado. Entonces, cuando esté inactivo, mostraré un texto para hacer clic y obtener un Pokémon, y en caso de éxito, quiero mostrar los datos del Pokémon. Así que implementemos esto también. Presta atención, el Pokémon data ya no existe, así que lo reemplazaremos con la variable de estado. Y en caso de error, quiero mostrar el mensaje de error que guardé en el estado. Y finalmente, quiero deshabilitar el botón mientras esté en el estado de carga.

Ahora finalmente puedo implementar fácilmente el indicador de carga. Entonces, lo que haré es cambiar el texto del botón a `Cargando` cuando esté en el estado de carga. Y mostraré el texto `Obtener Pokémon` cuando no esté. Obteniendo. Ok, y no olvides despachar el estado correcto cuando esté cargando. Y cuando recibamos los datos. Con los datos. Y cuando ocurra algún error. Actualicemos y probemos. Veo que no obtenemos el indicador de carga. Creo que sé por qué hay un error en el setTimeout. Arreglémoslo. Genial.

Probemos de nuevo y lo tenemos. Solo el estilo. Nos olvidamos del estilo. Así que movamos el estilo al div interno que implementamos. Y genial. Probemos de nuevo. Genial.

Por lo general, para este tipo de función asíncrona, los desarrolladores escriben diferentes reducers, pero conozco una mejor manera de compartir lógica. Hooks personalizados. Así que creemos uno. Tomemos el reducer, muévelo hacia abajo y declaremos un hook personalizado que llamaré userSync. Bien. El userSync recibirá una función asíncrona. Y de hecho, podemos usar nuestro reducer. Simplemente cambiémosle el nombre a algo más genérico. Tal vez fetchReducer sea mejor. Y podemos usarlo en nuestro hook. Genial.

Y ahora creemos una función que será responsable de cambiar el estado usando el dispatch. La llamaremos execute. Esta función recibirá parámetros, por supuesto. Comenzaremos despachando el estado de carga. Luego llamaremos a la función asíncrona argumento que recibimos con los parámetros. Y en caso de éxito, despacharemos el estado de éxito. Tenemos los datos, por supuesto. Y por último, pero no menos importante, en caso de error, despacharemos el estado de error, similar a lo que hicimos anteriormente. Quitamos el error con los datos del error. Ahora tendremos la función execute con useCallback para evitar re-renderizaciones, excepto cuando la función cambie. Y finalmente, devolvemos desde el hook la función execute y el estado, que podemos usar en la aplicación. Y vamos a usarlo de verdad.

Entonces, vamos a extraer execute y state del hook personalizado userSync, y necesitamos pasarle nuestra función, fetchRandomPokemon. Y hagamos algunos ajustes. Movemos el dispatch y sacamos esta función de la aplicación. Llamamos a execute. Genial. Y esto funciona bien. En realidad, no inventé nada de esto. Solo uso un patrón que encontré en la biblioteca de la escuela, use hooks, y aquí puedes ver userSync, que se implementa de manera muy similar a lo que hicimos. Y en realidad es increíble y esta biblioteca tiene muchos otros hooks personalizados. Realmente sugiero que lo revises.

Entonces, con tu permiso y para hacer un punto, voy a eliminar la aleatoriedad de los Pokémon por un momento y solo obtener al genial Pikachu. Observa que estoy obteniendo los data cada vez que hago clic, aunque tenga los mismos data todo el tiempo. Pikachu. Así que creo que sería bueno agregar un mecanismo de caché. Agregaré una variable de caché que contendrá los data y agregaré una bandera llamada caché y la llamaremos con true. Y vamos a implementar la caché. Entonces, si los data existen, los devolveré desde la caché. Correcto, si existen. Y de lo contrario, los obtendré utilizando la función asíncrona y los guardaré en la caché. Genial. Vamos a probarlo. Ahora se está obteniendo, y la segunda vez y la tercera vez y así sucesivamente, no se obtendrá nuevamente porque está utilizando los data en caché. Y vamos a agregar una invalidación para asegurarnos de que admitamos cuando los data no estén actualizados. Entonces, si la bandera de invalidación es true, restableceré la caché. Vamos a agregarlo al arreglo de dependencias. Y ahora vamos a establecer la bandera en true. Y si hago clic una y otra vez, se está obteniendo. Esto es útil cuando quiero indicarle a mi hook personalizado que los data ya no son relevantes y quiero volver a obtenerlos. Así que puedo conectarle un temporizador o algo así.

¿Y sabes qué? Es genial agregar un mecanismo de reintento. Y creo que sabes a dónde voy con esto. No tenemos que trabajar tan duro, aunque es divertido. Así que quiero que conozcas a React Query, que es mi primera opción cuando se trata de la API LL.

Primero, lo envolveré rápidamente con el proveedor de React Query. Viene de la biblioteca de React Query, que acabo de instalar. Y envolviendo toda la aplicación con el proveedor y el cliente. Y ahora puedo usar el hook incorporado de React Query llamado Use Query. Este hook contiene todo lo que acabamos de implementar en UserSync, incluido el sistema de caché, el mecanismo de reintento, la invalidación y muchas otras funcionalidades geniales.

Podemos deshacernos de UserSync y usar Use Query en su lugar. En realidad, tiene dos parámetros. El primero es la clave de consulta, que sirve como identificador de la consulta. Y el segundo es la función de consulta, similar al hook UserSync que acabamos de implementar. Entonces, esta será la función FetchPokemon, actualmente con Pikachu. Y vamos a extraer todo del resultado. Tenemos los data. Tenemos algunos indicadores, como si hubo un error, si está cargando, y así sucesivamente. Y lo usaremos en la interfaz de usuario, haremos algunos ajustes. Genial, el error. Podemos eliminar esto y usar la bandera IsError, que obtenemos de forma gratuita. Y la variable de error, que también podemos extraer. Y la función de actualización, que reemplazará la ejecución del hook UserSync. Genial, isLoading aquí en su lugar. Y aquí también. No IsLoading. Genial. Y genial, tenemos la caché de forma predeterminada. Limpiemos esto. Todo esto. Oh, qué buena sensación.

Y incluso podemos usar la función fetch random Pokemon una vez más y obtenerla de la caché. Genial. Todo funciona.

Entonces aquí está el sitio web de la biblioteca React Query. Lo cual es muy genial. Tiene una documentación genial. Y realmente sugiero revisarla. Tiene muchas funcionalidades útiles y realmente simplifica las cosas relacionadas con el manejo de la capa de API. Así que realmente vale la pena revisarlo.

En conclusión, lo que hicimos aquí fue tomar una función de API simple y conectarla a una interfaz de usuario realmente simple. Pero como puedes imaginar, a medida que la interfaz de usuario se vuelve más grande y más compleja, se vuelve más complicado manejar este tipo de funcionalidad de API. Y no necesitamos herramientas sofisticadas como Redux, MobX o muchas otras disponibles para manejar lo que se llama estados del servidor. Estas herramientas están destinadas a operaciones de estado del cliente, como si el diálogo está abierto, si una barra de menú está abierta, si estoy conectado o no. Esto es estado del cliente. En cualquier caso de manejo de estado del servidor, como obtener, almacenar en caché, cargar, etc., realmente sugiero construir una solución similar a Use Query o usar hooks personalizados asíncronos que acabamos de ver, o considerar realmente usar React Query, que es realmente, realmente útil en cada aplicación de React que he visto hasta ahora. Así que espero que hayas tenido un buen tiempo. Yo lo pasé muy bien y sabes dónde encontrarme.