Curso ReactJS y Redux
Curso ReactJS y Redux
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!


ReactJS con Redux nos ofrece la posibilidad de desarrollar el frontend de una aplicación llevando un control de los datos (estado) de la misma de forma muy sencilla.

ReactJS se encarga del frontend, es decir, de generar el html necesario el cual será presentado al usuario final, a través de componentes y el manejo de su estado y propiedades es fácil crear aplicaciones de cualquier tipo.

Redux se encarga de manejar el estado de la aplicación y convertir este estado en props para que sean accesibles desde nuestros componentes o containers de forma muy sencilla.

Para poder alterar los datos de la aplicación con Redux debemos crear y ejecutar acciones, las cuales normalmente sólo devuelven un objeto el cual es capaz de ejecutar un reducer.

Un reducer únicamente recibe el estado anterior con los nuevos datos, y devuelve un nuevo estado, nunca altera el estado anterior, para ello tenemos herramientas muy útiles recomendadas por ReactJS.

Una clase que extiende de Component no está para nada vinculada a Redux, para conseguir relacionar un Componente con Redux debemos hacer uso de connect de la siguiente forma.

En el caso anterior le estamos diciendo a Redux que conecte el componente CounterComponent para que pueda acceder al estado y acciones que hayan sido definidas en mapStateToProps y mapDispatchToProps, el siguiente ejemplo es muy claro.

Por lo tanto en el componente CounterComponent tendremos dentro de props las props counter, increment y decrement.

Una vez hemos explicado por encima cómo funciona ReactJS con Redux, veamos que vamos a desarrollar.

Aplicación de contador utilizando ReactJS con Redux

[button-blue url=”https://www.cursosdesarrolloweb.es/course/curso-reactjs-redux/curriculum/” target=”_blank” position=”center”] Accede ahora al Curso de React y Redux desde 0[/button-blue]

Simplemente será una aplicación donde utilizaremos ReactJS con Redux para manejar el estado a través de un sencillo contador, es el ejemplo más básico pero también el más claro.

Entender ReactJS con Redux no es fácil

Hablo desde mi experiencia con estas tecnologías, para mi no ha sido fácil entender el funcionamiento de ReactJS con Redux, en especial este último, crear acciones las cuales son objetos y tienen un type, éstas ejecutan reducers, los reducers reciben el estado anterior y devuelven un nuevo estado, nunca alteran el estado (inmutabilidad) y finalmente todo se une en algo que se llama store con otra cosa que se llama combineReducers, un follón, ¿acciones?, ¿reducers?, ¿estado?, ¡¿inmutabilidad?!, ¡¡¡¿stores?!!!.

Explícale a un programador que normalmente trabaja con POO, objetos, bases de datos relaciones y demás qué es todo eso, la única forma de entenderlo es con una muy buena explicación y echando muchas horas realizando ejemplos, mi aporte en este caso es intentar ofrecer una buena explicación con un ejemplo muy claro.

Desarrollar una aplicación utilizando ReactJS con Redux

Lo primero que tenemos que hacer es instalar de forma global create-react-app, para ello ejecuta el siguiente comando en tu terminal.

Ahora estamos en condiciones de crear nuestro primero proyecto con ReactJS.

¡Ya tenemos nuestro primer proyecto!, en este punto vamos a añadir todas las dependencias que vamos a necesitar con el siguiente comando.

Actions y ActionTypes

Ya hemos dicho que las acciones devuelven objetos los cuales tiene un tipo, y los actionTypes simplemente son constantes que definen el tipo de acción.

Alterar el estado con Reducers

Los reducers reciben el estado anterior, es decir, los datos que estaban disponibles anteriormente en la aplicación antes de llamar a una acción y devuelven un nuevo estado, es decir, los datos de la aplicación actualizados basados en la acción ejecutada.

Debe quedar claro que un reducer sólo alterará aquellos datos que se le haya solicitado, nunca todo el estado.

La forma más sencilla de comprobar la acción a ejecutar en un reducer es haciendo uso de una cláusula switch con type, si ningún caso se da siempre debemos retornar el estado de la aplicación cómo estaba al inicio.

Cómo puedes ver, siempre se retorna un nuevo objeto con los nuevos datos haciendo uso del operador de propagación (…).

Combinar todos los reducers

En este caso sólo tenemos un reducer el cual se encarga de mantener el estado de un contador, pero imagina que tienes múltiples reducers para mantener el estado del usuario logueado, posts, comentarios etcétera, en ese caso lo recomendable es utilizar combineReducers.

En este caso sólo tenemos 1 reducer, que es nuestro counter, gracias a combineReducers podríamos combinar varios reducers para que sean configurados en nuestra store.

Unir todo en una Store

Ahora que ya tenemos las acciones y los reducers, podemos crear una store, que es simplemente el almacén de datos de nuestra aplicación, a la cual le podemos pasar middlewares para potenciar su funcionalidad por defecto.

En este caso hacemos uso de logger para poder revisar las acciones y el estado de nuestra aplicación desde la consola del navegador y también hacemos que sea posible manejar Redux con la extensión de google chrome.

Después de toda la configuración que hemos llevado a cabo desde el inicio de este tutorial, estamos en condiciones de utilizar las acciones y acceder al estado de nuestra aplicación desde cualquier componente, vamos a hacerlo desde el CounterComponent.

Y ya tenemos nuestra primera aplicación construida haciendo uso de ReactJS con Redux desde 0, espero que te haya gustado y recuerda que tienes un curso de ReactJS con Redux desde 0 en cursosdesarrolloweb.es, en ese curso resolverás todas las dudas que hayan podido surgir en este tutorial.