Hooks en React.js

Vamos a crear un proyecto en la cual nos vamos autenticar y a ejecutar ciertas operaciones con Hooks, actions y reducers. Esta es una de varias formas en las cuales se puede aplicar estas nuevas funcionalidades en React.js, en lo personal, me parece bastante útil y estandar.

Primero que nada veamos la arquitectura que vamos a implementar, tenemos tres carpetas en la raíz: componentes, context y pages. La carpeta context contiene todo el estado y sus procesos: store, actions, reducers.

En este punto observamos que, esta arquitectura es algo similar a la de Redux, lo cual, los developers que usamos dicha herramienta lo vemos bastante familiar.

store/AuthGlobal.js: En este archivo configuramos el acceso global a nuestro estado, es similar a usar combineReducers y exportar todos los estados de nuestra aplicación para que la misma pueda ser accedida desde el componente que necesitemos.

En cuanto las actions y reducers son iguales a los que usamos con Redux, pueden ver dichas explicaciones en el siguiente post: Desarrollar el frontend de una API con React.js

Ahora, vamos a explicar cómo se puede crear un componente, que no es de clase, que tiene su ciclo de vida: src/pages/Login.js

Primero, importamos useEffect, useContext, useState de react, lo vemos en la linea 1. Segundo, importamos AuthGlobal que en este caso, es nuestro conexto global o nuestro estado global, lo vemos en la linea 3. Tercero, importamos loginUser, la acción que vamos a despachar en la linea 4. Luego, dentro de nuestro componente configuramos nuestro contexto con useContext y los estados de cada item que necesitemos: email, password, entre otros. (linea 8, 9 y 10)

Teniendo esto listo, podemos configurar un proceso que nos permite indicarle al componente que, si el usuario está logueado lo lleve al dashboard. useEffect es parte de los Hooks de react y nos ayuda a disparar estas acciones, similar a componentWillMount() del ciclo de vida de componentes de clase en React.js

Después, configuramos handleSubmit con las validaciones que necesitemos y con la llamada a la acción loginUser en la cual le pasamos los datos, el contexto y el manejador de errores.

Por último configuramos nuestro JSX, en cada input mediante el evento onChange cambiamos los datos de los estados de cada item cada vez que el usuario ingresa datos.

IMPORTANTE: Para que los formularios funcionen de esta manera es necesario instalar react-hook-form en nuestras dependencias.

Con esto, nuestro proceso de login queda configurado, solo de enlazar nuestra acción con el endpoint del API que necesitemos para que esté completo el proceso. Esto es lo que Hooks nos ofrece, acceso al estado global de nuestra aplicación sin necesidad de integrar otras herramientas, como Redux por ejemplo.

Pueden clonar el proyecto aquí: React Hooks

El API que los puede ayudar a completar el proyecto pueden bajarlo aquí: API Node.js con JWT

Espero que les sirva, saludos!