Redux es una biblioteca de gestión del estado predecible para aplicaciones JavaScript. Es especialmente útil en aplicaciones grandes donde la gestión del estado puede volverse compleja. En este tema, aprenderemos los conceptos básicos de Redux y cómo configurarlo en una aplicación React.
¿Qué es Redux?
Redux es una biblioteca que ayuda a gestionar el estado de la aplicación de manera centralizada. Los conceptos clave de Redux son:
- Store: El estado de toda la aplicación se almacena en un único objeto de estado.
- Actions: Son objetos que describen qué ocurrió en la aplicación.
- Reducers: Son funciones puras que toman el estado anterior y una acción, y devuelven un nuevo estado.
Ventajas de Usar Redux
- Predecibilidad del Estado: El estado de la aplicación es predecible y fácil de depurar.
- Mantenimiento: Facilita el mantenimiento del código al tener una estructura clara para la gestión del estado.
- Desarrollo de Funcionalidades: Facilita la adición de nuevas funcionalidades sin afectar el estado global de la aplicación.
Instalación de Redux y React-Redux
Para empezar a usar Redux en una aplicación React, necesitamos instalar dos paquetes: redux y react-redux.
Configuración Básica de Redux
- Crear Acciones
Las acciones son objetos que describen un cambio en el estado. Cada acción debe tener un tipo y puede tener un payload.
// actions.js
export const increment = () => {
return {
type: 'INCREMENT'
};
};
export const decrement = () => {
return {
type: 'DECREMENT'
};
};
- Crear Reducers
Los reducers son funciones puras que toman el estado anterior y una acción, y devuelven un nuevo estado.
// reducers.js
const initialState = {
count: 0
};
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1
};
case 'DECREMENT':
return {
...state,
count: state.count - 1
};
default:
return state;
}
};
export default counterReducer;
- Crear la Store
La store es el objeto que contiene el estado de la aplicación. Se crea usando el método createStore de Redux.
// store.js
import { createStore } from 'redux';
import counterReducer from './reducers';
const store = createStore(counterReducer);
export default store;
- Proveer la Store a la Aplicación
Usamos el componente Provider de react-redux para proveer la store a toda la aplicación.
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
- Conectar Componentes a la Store
Usamos el hook useSelector para acceder al estado y useDispatch para despachar acciones.
// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';
const Counter = () => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
};
export default Counter;Ejercicio Práctico
Ejercicio 1: Contador con Redux
- Objetivo: Crear una aplicación de contador que incremente y decremente el valor usando Redux.
- Pasos:
- Configura Redux en tu aplicación.
- Crea acciones para incrementar y decrementar el contador.
- Crea un reducer para manejar las acciones.
- Conecta el componente
Countera la store usandouseSelectoryuseDispatch.
Solución
// actions.js
export const increment = () => ({ type: 'INCREMENT' });
export const decrement = () => ({ type: 'DECREMENT' });
// reducers.js
const initialState = { count: 0 };
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
case 'DECREMENT':
return { ...state, count: state.count - 1 };
default:
return state;
}
};
export default counterReducer;
// store.js
import { createStore } from 'redux';
import counterReducer from './reducers';
const store = createStore(counterReducer);
export default store;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
// Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';
const Counter = () => {
const count = useSelector(state => state.count);
const dispatch = useDispatch();
return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
};
export default Counter;
// App.js
import React from 'react';
import Counter from './Counter';
const App = () => {
return (
<div>
<Counter />
</div>
);
};
export default App;Conclusión
En esta lección, hemos aprendido los conceptos básicos de Redux y cómo configurarlo en una aplicación React. Hemos cubierto cómo crear acciones, reducers y la store, así como cómo conectar componentes a la store usando useSelector y useDispatch. En el próximo tema, profundizaremos en las acciones y los reducers para gestionar estados más complejos.
Curso de React
Módulo 1: Introducción a React
- ¿Qué es React?
- Configuración del Entorno de Desarrollo
- Hola Mundo en React
- JSX: Extensión de Sintaxis de JavaScript
Módulo 2: Componentes de React
- Entendiendo los Componentes
- Componentes Funcionales vs de Clase
- Props: Pasando Datos a Componentes
- State: Gestión del Estado del Componente
Módulo 3: Trabajando con Eventos
- Manejo de Eventos en React
- Renderizado Condicional
- Listas y Claves
- Formularios y Componentes Controlados
Módulo 4: Conceptos Avanzados de Componentes
- Elevando el Estado
- Composición vs Herencia
- Métodos del Ciclo de Vida de React
- Hooks: Introducción y Uso Básico
Módulo 5: Hooks de React
Módulo 6: Enrutamiento en React
Módulo 7: Gestión del Estado
- Introducción a la Gestión del Estado
- API de Contexto
- Redux: Introducción y Configuración
- Redux: Acciones y Reductores
- Redux: Conectando a React
Módulo 8: Optimización del Rendimiento
- Técnicas de Optimización del Rendimiento en React
- Memorización con React.memo
- Hooks useMemo y useCallback
- División de Código y Carga Perezosa
Módulo 9: Pruebas en React
- Introducción a las Pruebas
- Pruebas Unitarias con Jest
- Pruebas de Componentes con React Testing Library
- Pruebas de Extremo a Extremo con Cypress
Módulo 10: Temas Avanzados
- Renderizado del Lado del Servidor (SSR) con Next.js
- Generación de Sitios Estáticos (SSG) con Next.js
- TypeScript con React
- React Native: Creación de Aplicaciones Móviles