Reageerhaak useReducer_
De useReducerhaak is vergelijkbaar met de useStatehaak.
Het maakt aangepaste statuslogica mogelijk.
Als u merkt dat u meerdere staatsdelen bijhoudt die afhankelijk zijn van complexe logica, useReducerkan dit handig zijn.
Syntaxis
De useReducer Hook accepteert twee argumenten.
useReducer(<reducer>, <initialState>)
De reducerfunctie bevat uw aangepaste statuslogica en initialStatekan een eenvoudige waarde zijn, maar zal over het algemeen een object bevatten.
De useReducerhaak retourneert de huidige stateen een dispatchmethode.
Hier is een voorbeeld van useReducerin een teller-app:
Voorbeeld:
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'));
Dit is slechts de logica om de volledige status van de taak bij te houden.
Alle logica om een taak toe te voegen, te verwijderen en te voltooien, zou in één enkele
useReducerHook kunnen worden opgenomen door meer acties toe te voegen.