Aprendiendo a implementar Redux
Existen diversos patrones, espacialmente para el desarrollo frontend. El más utilizado por los desarrolladores es el MVC (Modelo, Vista, Controlador); sin embargo, este no se adecúa correctamente a medida que una aplicación escala en funcionalidades. Ahí es donde entra la librería Redux.
Antes de implementar Redux, se debe tener en cuenta que es una arquitectura Flux para el manejo y el flujo de los datos en una aplicación web.
¿Qué es Flux?
Con Flux tenemos un flujo que se mueve continuamente en una sola dirección, con los siguientes elementos:
View. Las vistas son nuestros componentes creados con un framework como Angular, Vue o librerías como React.
Store. El almacenamiento guarda los datos (estado) de la aplicación. Aquí lo importante es que este estado no se puede cambiar, para eso se usan dispatchers y acciones.
Action. Las acciones son objetos de JavaScript que permiten realizar algo, podemos crear las que se necesiten para hacer modificaciones en la aplicación.
Dispatcher. El despachador se encarga de recibir las acciones y enviarlas hacia Store, de esta manera se cambia o actualiza un estado, es notificado en la vista y la vista actualiza con los cambios.
Flux es implementado en múltiples librerías, una de ellas es Redux.
¿Qué es Redux?
Redux (Reducer + Flux) nos permite manejar el estado de nuestra aplicación de forma global. Para que funcione adecuadamente se tienen que considerar tres principios: almacenamiento, estado inmutable y centralizado. Prácticamente son los principios que rigen el patrón Flux; sin embargo, ahora se agregan reducers.
Los reducers son funciones puras que reciben como parámetros el estado inicial y una acción. Nuestro ciclo queda de la siguiente manera:
Y ahora, a ponerlo en práctica.
Para este ejemplo construiremos una app sencilla utilizando React como librería en el frontend y consumiendo datos desde una api pública JsonPlaceholder.
Abrimos un nuevo proyecto en react (npx create-react-app redux) e instalamos las dependencias que utilizaremos para el proyecto:
npm i axios react-router-dom redux react-redux redux-thunk
Si ya estás familiarizado con React, puedes saltarte esta parte.
Creamos una estructura básica de react con tres componentes: uno que fungirá como wrapper de nuestros componentes, un menú y uno donde visualizaremos la información.
Users Component
Table Component
Routes Component
Main Component
Puedes definir tus propios estilos, en mi caso se ve algo así. Todavía no existen usuarios porque estos los pediremos desde una api.
Ahora es momento de implementar Redux
Utilzaremos Redux para manejar los tres posibles casos que debe tener una llamada asíncrona (success, loading y error). Lo primero que haremos será definir los cambios que queremos que tenga nuestra aplicación, es decir, implementaremos las acciones del usuario que en este caso será una petición de tipo GET a la api.
En Redux es muy común que algo no suceda de la manera que esperamos y para eso podemos debuggear nuestra aplicación. Una buena práctica es definir las acciones dentro de un objeto ‘type’; si una acción no coincide con el nombre que fue llamado, ésta disparará un error y podremos identificarlo de manera más rápida.
Este user helper contendrá nuestras acciones y será el que utilizaremos en actions y reducers.
La action creator fetchAllUsers es una high order funcion y contiene las tres acciones que definimos en types. En la llamada asíncrona (loading) nos conectamos para pedir usuarios (success) y puede fallar (error).
Definimos nuestros reducers
Los cuales hemos creado como acciones que cambiarán el estado de la aplicación.
Tenemos un estado global local para los usuarios que antes de la llamada asíncrona será un arreglo vacío, el estado de loading será falso y no habrá error.
Entonces el reducer recibe el estado inicial y una acción que dependerá de un caso específico de una llamada asíncrona.
Exportamos el reducer de usuario.
Conectamos Redux con el componente
Ya estamos utilizando una llamada asíncrona pero no hemos mostrado esta información en el componente, para ello ahora debemos regresarnos al componente Users, donde traermos los datos, y conectarlo con Redux.
MapStateToProps es una función que recibe la información que queremos traer desde Store y conectarla con el componente Users. Para conectarla utilizaremos connect que recibe MapStateToProps y las acciones que conectará al componente.
Haremos lo mismo para conectar el componente Table, pero este no recibirá acciones, puesto a que solo creamos acciones para el componente Users. Si lo conectamos con Store, podremos disponer de esos usuarios mediante props.
Creando el Store
Ahora debemos crear un Store y conectar los reducers que se comunicarán con él, para así poder cambiar el estado. Para ello haremos uso de las librerías que instalamos previamente y lo envolvemos dentro de un Provider, que será quien otorgue los cambios en toda la aplicación.
Y así es como debe de verse nuestra aplicación en este punto, con toda la información que disponemos de la api.
Recomiendo instalar redux dev tools para poder debuggear y literalmente navegar en el tiempo de nuestros componentes. Para esto, debemos agregar unas pocas líneas mas de codigo en Store.
Y desde la consola en el navegador veremos el simbolo de redux dev tools, donde podemos inspeccionar como ha transcurrido el tiempo en nuestra aplicación.
Hasta aquí ya tenemos el primer caso, que es el success. Vamos a crear dos componentes más para manejar el error y el loading.
Estos componentes los dejo a su gusto, simplemente pueden retornar un mensaje o bien, ser más creativos.
Lo que sí es importante es manejarlo desde el componente. En este caso, Users tendrá el error y loading, accesibles desde los props.
Users Component
Loading Case
Error Case
Para que veamos entrar nuestro mensaje de error, solo escriban mal la llamada a la api.
Y eso es todo, espero que este tutorial para implementar Redux les haya gustado.
Link de repo: https://github.com/alanmaranto/redux-blog
