Реагировать на useReducerкрючок
useReducerКрюк похож на Крючок useState.
Это позволяет использовать пользовательскую логику состояния.
Если вы обнаружите, что отслеживаете несколько частей состояния, которые полагаются на сложную логику, useReducerэто может быть полезно.
Синтаксис
Хук useReducer принимает два аргумента.
useReducer(<редуктор>, <initialState>)
Функция reducerсодержит вашу пользовательскую логику состояния, и initialStateможет быть простым значением, но обычно будет содержать объект.
Хук useReducerвозвращает текущий stateи dispatchметод.
Вот пример useReducerв приложении счетчика:
Пример:
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'));
Это просто логика для отслеживания статуса завершения задачи.
Всю логику добавления, удаления и завершения задачи можно было бы поместить в один
useReducerхук, добавив дополнительные действия.