Crochet de useReducerréaction
Le useReducercrochet est similaire au useStatecrochet.
Il permet une logique d'état personnalisée.
Si vous vous retrouvez à suivre plusieurs éléments d'état qui reposent sur une logique complexe, useReducercela peut être utile.
Syntaxe
Le crochet useReducer accepte deux arguments.
useReducer(<réducteur>, <étatinitial>)
La reducerfonction contient votre logique d'état personnalisée et initialStatepeut être une valeur simple mais contiendra généralement un objet.
Le useReducercrochet renvoie le courant stateet une dispatchméthode.
Voici un exemple useReducerdans une application de compteur :
Exemple:
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'));
C'est juste la logique pour garder une trace de l'état de la tâche terminée.
Toute la logique pour ajouter, supprimer et terminer une tâche peut être contenue dans un seul
useReducercrochet en ajoutant plus d'actions.