Redux en ReactJS: Guía Completa con Ejemplos Prácticos
ReactJS y Redux son dos herramientas muy populares en el desarrollo web moderno. ReactJS es una biblioteca JavaScript para construir interfaces de usuario, mientras que Redux es una biblioteca para manejar el estado de las aplicaciones. La combinación de ReactJS y Redux permite crear aplicaciones complejas y escalables con un código limpio y organizado.
Este artículo te guiará a través del proceso de integración de Redux en aplicaciones ReactJS utilizando ejemplos concretos. Empezaremos con una explicación básica de los conceptos clave de Redux, como las acciones, los reductores y el almacén. Luego, construiremos una aplicación simple para comprender cómo funciona Redux en la práctica. Finalmente, aplicaremos Redux a un proyecto real, Paper Dashboard React, para gestionar los colores del menú.
Conceptos Básicos de Redux
Redux es una arquitectura de gestión de estado que ayuda a mantener el estado de las aplicaciones ReactJS organizado y predecible. El estado de una aplicación se refiere a la información que define el comportamiento y la apariencia de la aplicación en un momento dado.
Redux funciona basado en tres componentes principales:
- Acciones (Actions): Son objetos que describen qué ocurrió en la aplicación. Son como mensajes que se envían al almacén de estado para actualizarlo.
- Reductor (Reducer): Es una función pura que recibe el estado actual y una acción, y devuelve un nuevo estado. Los reductores son responsables de actualizar el estado de la aplicación en respuesta a las acciones.
- Almacén (Store): Es un objeto que contiene el estado actual de la aplicación. El almacén es el único lugar donde se almacena el estado de la aplicación.
Ejemplo Simple: Animación de Rotar Logo
Para comprender cómo Redux interactúa con ReactJS, vamos a construir un ejemplo simple donde un logotipo gira continuamente.
1. Configurar Redux
Comencemos por instalar las dependencias necesarias:
bash
npm install redux react-redux
A continuación, creamos un archivo store.js donde configuramos el almacén de estado de nuestra aplicación:
«`javascript
import { createStore } from ‘redux’;
const initialState = {
angle: 0,
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case ‘ROTATE’:
return {
…state,
angle: state.angle + 10,
};
default:
return state;
}
};
const store = createStore(reducer);
export default store;
«`
En este código, definimos el estado inicial initialState, que incluye el ángulo de rotación del logotipo. Luego, creamos el reductor reducer, que maneja la acción ROTATE. Cuando se recibe la acción ROTATE, el reductor incrementa el ángulo del logotipo en 10 grados. Finalmente, creamos el almacén store utilizando la función createStore de Redux.
2. Componente de ReactJS
Ahora, creamos un componente de ReactJS que renderiza el logotipo rotatorio:
«`javascript
import React from ‘react’;
import { useSelector, useDispatch } from ‘react-redux’;
function Logo() {
const angle = useSelector(state => state.angle);
const dispatch = useDispatch();
const handleRotate = () => {
dispatch({ type: ‘ROTATE’ });
};
return (
rotate(${angle}deg) }} /> );
}
export default Logo;
«`
Este componente utiliza los hooks useSelector y useDispatch de react-redux para acceder al estado del almacén y enviar acciones. useSelector selecciona el valor del ángulo del almacén de estado. useDispatch devuelve una función que permite enviar acciones al almacén.
Al hacer clic en el botón «Rotar», se envía la acción ROTATE al almacén, y el reductor actualiza el estado del ángulo del logotipo. El componente se re-renderiza con el nuevo ángulo, haciendo que el logotipo rote.
Aplicando Redux a Paper Dashboard React
Ahora, vamos a aplicar Redux a un proyecto real, Paper Dashboard React, para gestionar los colores del menú.
1. Instalar las Dependencias
En el proyecto de Paper Dashboard React, instalamos las dependencias necesarias:
bash
npm install redux react-redux
2. Configurar Redux
Creemos un archivo store.js para configurar el almacén de estado:
«`javascript
import { createStore, combineReducers } from ‘redux’;
import leftMenuReducer from ‘./reducers/leftMenuReducer’;
import rightMenuReducer from ‘./reducers/rightMenuReducer’;
const rootReducer = combineReducers({
leftMenu: leftMenuReducer,
rightMenu: rightMenuReducer,
});
const store = createStore(rootReducer);
export default store;
«`
Aquí, creamos un reductor raíz rootReducer que combina los reductores leftMenuReducer y rightMenuReducer, que gestionarán los colores del menú izquierdo y derecho respectivamente.
3. Crear los Reductores
Creamos los archivos leftMenuReducer.js y rightMenuReducer.js para definir los reductores para el menú izquierdo y derecho:
leftMenuReducer.js:
«`javascript
const initialState = {
color: ‘blue’,
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case ‘SETLEFTMENU_COLOR’:
return {
…state,
color: action.payload,
};
default:
return state;
}
};
export default reducer;
«`
rightMenuReducer.js:
«`javascript
const initialState = {
color: ‘red’,
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case ‘SETRIGHTMENU_COLOR’:
return {
…state,
color: action.payload,
};
default:
return state;
}
};
export default reducer;
«`
Estos reductores manejan las acciones SET_LEFT_MENU_COLOR y SET_RIGHT_MENU_COLOR respectivamente, actualizando el color del menú correspondiente.
4. Modificar los Componentes
Necesitamos modificar los componentes del menú izquierdo y derecho para conectarlos a Redux y eliminar el uso de estados locales.
En el componente del menú izquierdo, agreguemos lo siguiente:
«`javascript
import React from ‘react’;
import { useSelector, useDispatch } from ‘react-redux’;
function LeftMenu() {
const color = useSelector(state => state.leftMenu.color);
const dispatch = useDispatch();
const handleColorChange = () => {
dispatch({ type: ‘SETLEFTMENU_COLOR’, payload: ‘green’ });
};
return (
);
}
export default LeftMenu;
«`
En el componente del menú derecho, agreguemos lo siguiente:
«`javascript
import React from ‘react’;
import { useSelector, useDispatch } from ‘react-redux’;
function RightMenu() {
const color = useSelector(state => state.rightMenu.color);
const dispatch = useDispatch();
const handleColorChange = () => {
dispatch({ type: ‘SETRIGHTMENU_COLOR’, payload: ‘yellow’ });
};
return (
);
}
export default RightMenu;
«`
Ahora, ambos componentes acceden al color del menú desde el almacén de estado y pueden actualizarlo al enviar acciones.
5. Probar la Aplicación
Con los cambios realizados, ahora podemos ejecutar la aplicación y probar la funcionalidad del menú. Al hacer clic en el botón «Cambiar Color» en cada menú, su color cambiará, reflejando la actualización del estado en el almacén de Redux.
Conclusión
Al integrar Redux en aplicaciones ReactJS, podemos manejar el estado de forma organizada y predecible, lo que facilita el desarrollo de aplicaciones complejas y escalables. Redux nos permite crear una única fuente de verdad para el estado de la aplicación, lo que facilita la depuración y la colaboración entre los desarrolladores.
Redux es una herramienta poderosa que puede ayudarte a construir aplicaciones ReactJS más robustas y mantenibles. Aprender a usar Redux es una inversión valiosa para cualquier desarrollador ReactJS.
Recursos Adicionales
- Documentación oficial de Redux: https://redux.js.org/
- Documentación oficial de react-redux: https://react-redux.js.org/
- Tutoriales de Redux: https://www.freecodecamp.org/news/redux-tutorial/
- Ejemplos de Redux: https://github.com/reduxjs/redux/tree/master/examples
Keywords
- react and redux
- react js with redux
- redux js react
- react js redux
- react redux
- redux react