Хороших ответов пока нет, но я добавлю пользовательский хук, когда вы хотите инициировать запрос, потому что вы тоже можете это сделать.
function useTriggerableEndpoint(fn) {
const [res, setRes] = useState({ data: null, error: null, loading: null });
const [req, setReq] = useState();
useEffect(
async () => {
if (!req) return;
try {
setRes({ data: null, error: null, loading: true });
const { data } = await axios(req);
setRes({ data, error: null, loading: false });
} catch (error) {
setRes({ data: null, error, loading: false });
}
},
[req]
);
return [res, (...args) => setReq(fn(...args))];
}
Вы можете создать функцию, используя эту ловушку для конкретного метода API, например, если хотите, но помните, что эта абстракция не является строго обязательной и может быть довольно опасной (свободная функция с ловушкой не является хорошей идеей если он используется вне контекста функции компонента React).
const todosApi = "https://jsonplaceholder.typicode.com/todos";
function postTodoEndpoint() {
return useTriggerableEndpoint(data => ({
url: todosApi,
method: "POST",
data
}));
}
Наконец, из вашего функционального компонента
const [newTodo, postNewTodo] = postTodoEndpoint();
function createTodo(title, body, userId) {
postNewTodo({
title,
body,
userId
});
}
А затем просто укажите createTodo
на обработчик onSubmit
или onClick
. newTodo
будет иметь ваши данные, статусы загрузки и ошибок. Код песочницы прямо здесь.