Gancho de useReducerreacción
El useReducerGancho es similar al useStateGancho.
Permite una lógica de estado personalizada.
Si se encuentra realizando un seguimiento de varias piezas de estado que se basan en una lógica compleja, useReducerpuede ser útil.
Sintaxis
El useReducer Hook acepta dos argumentos.
useReducer(<reductor>, <estado inicial>)
La reducerfunción contiene su lógica de estado personalizada y initialStatepuede ser un valor simple, pero generalmente contendrá un objeto.
El useReducergancho devuelve el actual statey un dispatchmétodo.
Aquí hay un ejemplo de useReduceruna aplicación de contador:
Ejemplo:
import { useReducer } from "react";
import ReactDOM from "react-dom";
const initialTodos = [
{
id: 1,
title: "Todo 1",
complete: false,
},
{
id: 2,
title: "Todo 2",
complete: false,
},
];
const reducer = (state, action) => {
switch (action.type) {
case "COMPLETE":
return state.map((todo) => {
if (todo.id === action.id) {
return { ...todo, complete: !todo.complete };
} else {
return todo;
}
});
default:
return state;
}
};
function Todos() {
const [todos, dispatch] = useReducer(reducer, initialTodos);
const handleComplete = (todo) => {
dispatch({ type: "COMPLETE", id: todo.id });
};
return (
<>
{todos.map((todo) => (
<div key={todo.id}>
<label>
<input
type="checkbox"
checked={todo.complete}
onChange={() => handleComplete(todo)}
/>
{todo.title}
</label>
</div>
))}
</>
);
}
ReactDOM.render(<Todos />, document.getElementById('root'));
Esta es solo la lógica para realizar un seguimiento del estado de las tareas pendientes.
Toda la lógica para agregar, eliminar y completar una tarea pendiente podría estar contenida en un solo
useReducergancho agregando más acciones.