El hook useReducer de React es una herramienta que permite manejar el estado de una aplicación de forma similar al uso del hook useState, pero con algunas ventajas adicionales. A continuación, explicaremos cómo funciona y cuándo debe ser utilizado.
El hook useReducer recibe dos argumentos: un reductor y un valor inicial. El reductor es una función que recibe el estado actual y una acción, y devuelve el nuevo estado. Por ejemplo, si queremos crear un contador, nuestro reductor podría ser algo así:
const reductor = (state, action) => {
switch (action.type) {
case 'increment':
return state + 1;
case 'decrement':
return state - 1;
default:
return state;
}
};
El valor inicial es el estado inicial de la aplicación. Por ejemplo, si queremos que nuestro contador inicie en cero, nuestro valor inicial sería cero.
Una vez que tenemos el reductor y el valor inicial, podemos utilizar el hook useReducer de la siguiente manera:
const [state, dispatch] = useReducer(reductor, 0);
El hook useReducer devuelve un array con dos elementos: el estado actual y una función dispatch. La función dispatch recibe una acción, y utiliza el reductor para actualizar el estado. Por ejemplo, si queremos incrementar el contador, podemos utilizar la función dispatch de la siguiente manera:
dispatch({ type: 'increment' });
En este ejemplo, el reductor recibirá el estado actual (que inició en cero) y la acción { type: 'increment' }, y devolverá el nuevo estado (que sería 1).
En cuanto a cuándo debe usarse el hook useReducer, es recomendado utilizarlo cuando el estado de la aplicación es complejo y requiere varios cambios a la vez. También se recomienda su uso en caso de necesitar manejar varios estados relacionados entre sí. En resumen, useReducer es una excelente opción para manejar estado complejo, y para manejar estado cuando el estado y la lógica de actualización se vuelve demasiado compleja para useState.
Por último, mostramos un ejemplo más completo de uso de useReducer, escrito con TypeScript:
interface Action {
type: string;
}
const reducer = (state: number, action: Action) => {
switch (action.type) {
case 'increment':
return state + 1;
case 'decrement':
return state - 1;
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, 0);
return (
<>
<h1>{state}</h1>
<button onClick={() => dispatch({ type: 'increment' })}>Incrementar</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrementar</button>
</>
);
}
En este ejemplo, definimos una interfaz Action que se utilizará para especificar el tipo de acciones que se pueden enviar al reductor. El reductor se define como una función que recibe el estado actual y la acción. En el componente Counter se utiliza el hook useReducer para inicializar el estado y la función dispatch. El componente renderiza un h1 con el estado actual, y dos botones para incrementar o decrementar el estado. Al hacer click en cualquiera de los botones, se utiliza la función dispatch para enviar una acción al reductor, el cual actualiza el estado.
