Haken useReducerreagieren
Der useReducerHaken ist dem Haken ähnlich useState.
Es ermöglicht eine benutzerdefinierte Zustandslogik.
Wenn Sie feststellen, dass Sie mehrere Zustandselemente verfolgen, die auf komplexer Logik beruhen, useReducerkann dies hilfreich sein.
Syntax
Der useReducer-Hook akzeptiert zwei Argumente.
useReducer(<Reduzierer>, <Anfangszustand>)
Die reducerFunktion enthält Ihre benutzerdefinierte Zustandslogik und initialStatekann ein einfacher Wert sein, enthält aber im Allgemeinen ein Objekt.
Der useReducerHook gibt den Strom stateund eine dispatchMethode zurück.
Hier ist ein Beispiel für useReducereine Zähler-App:
Beispiel:
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'));
Dies ist nur die Logik, um den Todo-Complete-Status zu verfolgen.
Die gesamte Logik zum Hinzufügen, Löschen und Abschließen einer Aufgabe könnte in einem einzigen
useReducerHook enthalten sein, indem weitere Aktionen hinzugefügt werden.