Implementación de REDUX en React
Configuración y aplicación del patrón Redux en una aplicación de React.
Para que puedas hacerte una idea del funcionamiento de Redux te dejo el siguiente esquema que explica como trabaja redux.
La documentación oficial de Redux se encuentra en el siguiente enlace: https://es.redux.js.org/
Y la instalación de este se realiza mediante el comando npm i redux.
Comenzaremos yendo al siguiente enlace https://react-redux.js.org/. En el cuál nos encontraremos con lo siguiente:
Pulsaremos en el botón Get Started el cuál nos llevara a la página donde nos explicará las instalaciones que tendremos que realizar para poder utilizar el patrón Redux en nuestra aplicación.
Ejecutaremos el comando que tenemos en la imagen de abajo para la instalación de react-redux y redux dentro de nuestra aplicación.
Voy a utilizar el navegador Chrome. Aquí es conveniente la instalación de la extensión que nos ayudará con la visualización e implementación de redux dentro de la aplicación.
Una vez instalada podremos ver lo siguiente en las herramientas de desarrollo del navegador.
Una vez tenemos instaladas todas estás características podemos pasar a trabajar en la aplicación. Trabajaremos en reacto con la sintaxis de hooks.
Para mostrar la utilidad de Redux y su funcionamientos lo haré mediante un login.
Así que crearé un pequeño componente llamado Auth.
Una vez está hecho el componente vamos a crear dentro de la carpeta src una carpeta llamada reducers y dentro un fichero que llamaré authReducer.js
En este fichero controlaremos las acciones que van a ocurrir en nuestra aplicación. Para tener las acciones de forma ordenada crearé un archivo llamado Types donde definiré que acciones puedo ejecutar.
Voy a crear dos acciones una para loguearse en la aplicación que llamaré login y otra que será para desloguearse llamada logout.
Como vemos en la imagen de arriba (fichero authReducer.js) recibimos un state que por defecto esa vacío y una acción que evaluaremos en el switch que nos mandarán desde los archivos donde definiremos las acciones más adelante.
A continuación vamos a crear el store
El store es donde tendremos toda la información que queremos centralizar en un único punto.
Importamos createStore de redux. Por defecto en la función createStore solo nos permite enviarle un reducer por ello utilizaremos la funcionalidad de combineReducers, que nos permitirá tener los reducers que queramos en el store.
Ahora necesitamos importar en el punto más alto de la aplicación o un punto en el que a través de cualquier componente nos permita acceder a la información que tenemos en nuestros store. Por lo tanto lo importaré en mi index.js de la siguiente manera:
Como vemos importamos el Provider de react-redux y dentro metemos nuestra aplicación. Todo lo que se encuentre envuelto dentro del Provider que como vemos esta pasando el store podrá recibir esa información.
Hasta aquí serían las configuraciones necesarias para la configuración de Redux en nuestra aplicación. Pero aún no podemos ver nada en nuestra herramienta de Redux en nuestro navegador.
Para ello tendremos que ejecutar unos pasos más.
Tendremos que ir al siguiente enlace:
https://github.com/zalmoxisus/redux-devtools-extension#usage
Podremos encontrar los siguiente en esta página
Tendremos que agregar la línea subrayada en el store.
Y una vez hecho esto podremos ver ya en nuestra herramienta redux del navegador la información que tenemos configurada en la aplicación. Se puede ver el auth que es lo que configuramos en el authReducer y le dimos un state vacío tal y como aparece.
Ya con las herramientas y redux configurado en nuestra aplicación vamos a pasar a realizar el ejemplo del login para comprobar su funcionamiento.
En el proyecto voy a crear una carpeta donde voy a indicar las acciones(actions) que podremos realizar con redux que no van a ser más que simples funciones.
Dentro creo un archivo llamado auth.js ya que aquí solo se van a guardar las acciones que tengan que ver con el login.
Como vemos la acción que tenemos de login recibe un email y un password que lo que hará es retornar esa información al authReducer que creamos anteriormente cuando se haga un dispatch de esa acción. Para entender esto vamos a ver que es eso del dispatch.
Nos encontramos en el componente Auth que es donde está el formulario para loguearse.
Y como vemos hemos importado el useDispatch que es un hook que nos trae react-redux que lo que nos permite es llamar a la acción que tenemos creada dentro del archivo .actions/auth.js.
Como vemos el funcionamiento es sencillo no hace falta más que importarlo, instanciarlo como se ve en la línea 7 y utilizarlo de la manera que vemos en la línea 22, en la que llamamos a la acción login que si recordamos recibía el email y el password.
Con todo esto configurado vamos a probarlo.
Y como vemos al loguearnos vemos como cambia el state con la información que queremos que aparezca.
Lo último que nos quedaría por ver es como accedemos a esa información que tenemos centralizada.
Bueno pues para ello lo que voy a hacer es crear otro componente que llamaré prueba donde veremos como acceder a la información.
En este componente lo único que necesitamos hacer para acceder a la información es importar
El useSelector que es otro hook de react-redux.
En la línea 6 lo instanciamos. Como vemos lo que hace este hook es devolvernos un callback
Con la información que hay en el state. Únicamente tenemos la del authReducer así que seleccionamos esa. Y en la línea 7 cogemos el email y el password.
Y como se ve saca la información que tenemos guardada en nuestro state.
Autor/a: Andrés Basurto
Curso: Desarrollo Web Full Stack, MultiCloud y Multiplataforma
Centro: Tajamar
Año académico: 2020-2021
Tenéis el código fuente en el siguiente enlace: https://github.com/andresbasur98/explicacion-redux/tree/main/src