Reaguj useReducerhak
Hook jest useReducerpodobny do useStateHooka.
Pozwala na niestandardową logikę stanu.
Jeśli zauważysz, że śledzisz wiele elementów stanu, które opierają się na złożonej logice, useReducermoże być przydatne.
Składnia
Hook useReducer akceptuje dwa argumenty.
useReducer(<reduktor>, <stan początkowy>)
Funkcja reducerzawiera twoją niestandardową logikę stanu i initialStatemoże być prostą wartością, ale zazwyczaj zawiera obiekt.
useReducerHook zwraca bieżący i statemetodę dispatch.
Oto przykład useReduceraplikacji licznikowej:
Przykład:
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 tylko logika śledzenia stanu ukończenia zadań do wykonania.
Cała logika związana z dodawaniem, usuwaniem i ukończeniem zadania może być zawarta w jednym
useReducerhooku poprzez dodanie większej liczby akcji.