React хук useReducer
Хук useReducer схожий на хук useState.
Це дозволяє використовувати спеціальну логіку стану.
Якщо ви виявите, що відстежуєте кілька частин стану, які спираються на складну логіку, useReducer може бути корисним.
Синтаксис
Хук useReducer приймає два аргументи.
useReducer(<reducer>, <initialState>)
Функція reducer містить власну логіку стану, а initialState може бути простим значенням, але зазвичай міститиме об’єкт.
Хук useReducer повертає поточний state (стан) та dispatch (спосіб відправки).
Ось приклад useReducer у програмі лічильника:
Приклад:
import { useReducer } from "react";
import ReactDOM from "react-dom/client";
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>
))}
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Todos />);
Це просто логіка відстеження статусу виконання завдань.
Усю логіку додавання, видалення та завершення завдань можна вмістити в одному хуку useReducer, додавши більше дій.
