Cómo gestionar el estado con useReducer en React
El hook useReducer en React es una alternativa a useState que se utiliza para gestionar estados más complejos en componentes funcionales. Es útil cuando se tiene lógica de actualización que involucra múltiples valores o cuando el estado depende de acciones previas. Funciona con un patrón similar a Redux, utilizando acciones y un reducer para definir cómo cambia el estado.
¿Qué es useReducer y cuándo usarlo?
useReducer es un hook que permite gestionar el estado utilizando un patrón de reducer y dispatch. Es ideal cuando se trabaja con lógica de estado que requiere múltiples subvalores, dependencias en acciones anteriores o cuando se desea hacer más legible el código separando la lógica de actualización en una función externa.
La estructura básica de useReducer se compone de tres elementos:
1. Reducer: Una función pura que toma el estado y una acción como parámetros, y devuelve un nuevo estado.
2. Acción: Un objeto que describe el tipo de cambio que se debe realizar en el estado.
3. Dispatch: Una función que se usa para enviar las acciones al reducer.
Ejemplo básico de useReducer
import React, { useReducer } from 'react';
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
}
export default Counter;
En este ejemplo, useReducer inicializa el estado con initialState y permite que el estado cambie a través de las acciones increment y decrement.
¿Cuándo preferir useReducer en lugar de useState?
- Cuando el estado tiene múltiples valores dependientes entre sí.
- Si se maneja lógica de actualización compleja que involucra múltiples acciones.
-
Para mejorar la legibilidad del código y separar la lógica del estado en una función específica (
reducer).
Ejemplos de uso de useReducer en React
1. Gestión de formularios complejos: useReducer es útil para manejar múltiples campos en un formulario y sus validaciones.
2. Estado global del componente: Cuando se necesita compartir un estado complejo entre componentes anidados.
Referencia oficial
Puedes encontrar más detalles sobre el uso de useReducer en la documentación oficial de React.
Jorge García
Fullstack developer