Reageer useReducerHook
Die useReducerHook is soortgelyk aan die useStateHook.
Dit maak voorsiening vir pasgemaakte staatslogika.
As jy vind dat jy tred hou met verskeie state wat op komplekse logika staatmaak, useReducerkan dit nuttig wees.
Sintaksis
Die useReducer Hook aanvaar twee argumente.
useReducer(<reducer>, <initialState>)
Die reducerfunksie bevat jou persoonlike toestand logika en die initialStatekan 'n eenvoudige waarde wees, maar sal oor die algemeen 'n voorwerp bevat.
Die useReducerHook gee die stroom stateen 'n dispatchmetode terug.
Hier is 'n voorbeeld van useReducerin 'n toonbank-toepassing:
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 net die logika om tred te hou met die todo-volledige status.
Al die logika om 'n taak by te voeg, uit te vee en te voltooi, kan in 'n enkele
useReducerHook vervat word deur meer aksies by te voeg.