Reagovat useReducerHook
useReducerHák je podobný Háku useState.
Umožňuje vlastní logiku stavu.
Pokud zjistíte, že sledujete více částí stavu, které se spoléhají na složitou logiku, useReducermůže to být užitečné.
Syntax
UseReducer Hook přijímá dva argumenty.
useReducer(<reduktor>, <počáteční stav>)
Funkce reducerobsahuje vaši vlastní logiku stavu a initialStatemůže to být jednoduchá hodnota, ale obecně bude obsahovat objekt.
useReducerHook vrací proud a statemetodu dispatch.
Zde je příklad useReduceraplikace počítadla:
Příklad:
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'));
To je jen logika pro sledování stavu dokončení úkolu.
Veškerá logika pro přidání, odstranění a dokončení úkolu by mohla být obsažena v jediném
useReducerháku přidáním dalších akcí.