Agregar Lógica Personalizada Utilizando el Patrón State Reducer y React Custom Hooks

Matías Hernández: [0:00] Nuestro componente Wizard ya está completo y puede ser utilizado de diferentes formas. ¿Qué podemos hacer con este y el patrón useReducer? Podemos agregar lógicas por medio de un reducer personalizado.

[0:11] Digamos que queremos mostrar un comic de XKCD en base a una búsqueda. Primero comenzaremos haciendo un pequeño refactor de nuestro Wizard. Removemos este destructuring aquí y obtenemos el estado, pero pasaremos el estado completo a nuestro contexto utilizando destructuring de nuevo y también la función dispatch() para poder ser utilizada externamente.

[0:31] Volvemos a nuestra aplicación. Lo que queremos es mostrar un formulario dentro de una Página 1. Vemos que todo funciona correctamente. Para eso iremos a nuestro componente Page1 y lo refactorizaremos para poder mostrar nuevos componentes. Agregaremos los elementos HTML necesarios, que son un label, un input y un botón.

[0:50] También necesitamos un estado que manejar. Para eso utilizaremos React.useState que nos retorna una dupla con el valor del estado comicId y la función setComicId. Utilizaremos este estado para pasarlo al input como valor y utilizaremos el evento onChange para definir el valor de este estado utilizando setComicId. Nuestro input funciona.

[1:12] Ahora necesitamos implementar la función de búsqueda. Utilizaremos el evento onClick dentro del botón y pasaremos la función search.

[1:20] Debemos definir search que será una función asíncrona que efectuará un request, o una llamada a la API correspondiente. Lo primero que está función realizará es revisar si comicId existe y si es un valor numérico. De ser así, podremos efectuar nuestra llamada, pero esta es una función asíncrona.

[1:38] Corregimos esta pequeña falta, agregamos async y ahora podemos efectuar nuestra llamada. Primero definiremos la URL que utilizaremos. La dejaremos en blanco igual. Crearemos una variable llamada response. Utilizaremos await para esperar esta función asíncrona fetch().

[1:53] Una vez que tengamos la respuesta volvemos a utilizar await y utilizamos el método json() para obtener los datos de este response. ¿Qué hacemos con estos datos? Tenemos que buscar dónde guardarlos y cómo efectuar el siguiente paso que es navegar a la Página 2.

[2:10] Aquí es donde entra en juego el patrón useReducer. Recordemos que nuestro Wizard acepta initialState y reducer. Crearemos un nuevo inicio de state personalizado que tendrá un objeto llamado comicData, que es un objeto vacío por defecto, y un nuevo reducer, que recibe un estado y una acción.

[2:26] Este reducer actuará sobre una acción personalizada que hemos llamado COMIC_FETCHED. Si la acción es de ese tipo, entonces retornará el estado original, utilizando destructuring, y comicData estará completado con el valor del payload que viene dentro de action. En caso contrario simplemente retornará el estado.

[2:50] Pasamos estas props a nuestro Wizard, initialState como initialState y reducer como reducer. Ahora ya podemos volver a nuestro componente Page1.

[3:00] Haremos uso de otra de las API de nuestro Wizard, en este caso useWizardContext donde obtenemos dispatch para poder emitir el evento y goNextPage para poder navegar a la siguiente página. Con dispatch podemos emitir la acción comicFetched que definimos en nuestro propio reducer.

[3:17] Por eso agregamos dispatch({ type: 'COMIC_FETCHED }) y como payload agregamos los datos obtenidos desde la llamada a la API de XKCD y ahora llamamos a goNextPage. Nos falta definir la URL de XKCD. Para eso obtenemos simplemente la URL desde este ejemplo y utilizamos template literals para poder concatenar con nuestro comicId real.

[3:39] En este ejemplo la API de XKCD tiene un problema con cors así que utilizaremos un Proxy llamado cors-anywhere. Copiamos esta URL y lo utilizamos acá. Definimos la variable proxy y concatenamos ambas URL dentro de la llamada app fetch. No olvidemos que estamos haciendo uso de async/await. Es aconsejable que utilicemos el bloque try...catch para verificar que todo esté en orden.

[4:02] Tomamos este trozo de código y lo ponemos dentro del bloque try. Ahora ya podemos probar nuestro nuevo input. Agregamos una idea cualquiera, 124. Ponemos buscar y vemos que al hacer click en buscar navega a la Página 2 y tenemos el resultado de nuestro JSON.

[4:16] Ahora actualizaremos la Página 2 para poder desplegar esta información. Simplemente hacemos uso nuevamente de useWizardContext para obtener el estado, en este caso, el atributo comicData, y de este comicData utilizamos destructuring para obtener el título, el número, la imagen y el texto alternativo.

[4:36] Agregamos algunos elementos HTML para mostrar estos datos, un h2 para mostrar el título y el número y un elemento img para mostrar la imagen y el texto alternativo. Volvemos atrás y podemos probar agregar un id cualquiera. Número 45, pulsamos buscar y nos carga Schrodinger, que es el comic 45 y podemos ver la imagen.

[4:56] Tenemos un formulario completamente funcional utilizando el patrón state reducer para agregar acciones personalizadas y estado personalizado compartido a través del context del propio Wizard.