Как в React вынесли обращения к беку от отдельный фыйл?

Question

[Ivan-P]

3 года писал только на Ангуляре и вот решил выйти за рамки и освоить еще и Реакт.
В Агнгуляре вся бизнес логика как правило выносится из компонентов в сервисы а вот в Реакте я такого не вижу. Есть вот у меня компонент высшего порядка с логикой добавления-удаления задач и получения списка.

function ListContainer() {
  const { getTokenSilently } = useAuth0();

  const [loading, setLoading] = useState(true);
  const [list, setList] = useState([]);
  const [error, setError] = useState('');

  const getList = useCallback(async () => {
    const token = await getTokenSilently();
    const headers = {Authorization: `Bearer ${token}`};

    axios
      .get(`${BACKEND_URL}/list`, {headers})
      .then((res) => {
        setList(res.data);
        setLoading(false);
      })
      .catch((err) => setError(err.toString()));
  }, [getTokenSilently]);

  useEffect(() => (getList()), [getList]);

  const handleTaskEdit = async (formValue) => {
    const token = await getTokenSilently();
    console.log(token);
    const headers = {Authorization: `Bearer ${token}`};

    axios
      .post(`${BACKEND_URL}/list`, formValue, {headers})
      .then(() => getList())
      .catch((err) => setError(err.toString()));
  };

  const deleteTask = async (id) => {
    console.log('deleteTask ', id);
    const token = await getTokenSilently();
    const headers = {Authorization: `Bearer ${token}`};
    axios
      .delete(`${BACKEND_URL}/list/${id}`, {headers})
      .then(() => getList())
      .catch((err) => setError(err.toString()));

  };

  return (<div className="container-fluid">
        <div className="row mb-3">
          <div className="col-12">
            <TaskForm onFormSubmit={handleTaskEdit}/>
          </div>
        </div>
        <div className="row">
          <div className="col-12">
            <AlertError text={error} />
            {loading}
          </div>
        </div>
          <ListGroup list={list.filter((item) => !item.done)} onDelete={deleteTask} />
          <ListGroup list={list.filter((item) => item.done)} onDelete={deleteTask} />
      </div>);
}

держать такое в компоненте как помне не правильно - пытался вынести в отдельный файл, но возникли проблемы с получением токена - Реакт ругается на то, что пытаюсь использовать хуки вне компонента. А как бы вы отрефакторили этот код?

Answer 1

[abberati]

Я бы создал кастомный хук useRequest, куда можно передать метод (гет или пост), урл и данные. Он возвращал бы промис. Всё.

А этот хук я бы завернул в useHttpGet и useHttpPost, чтобы метод не передавать каждый раз.

Answer 2

[Павел Диденко]

1. Это не компонент высшего порядка
2. Держать столько всего в компоненте не то чтобы не правильно, это просто не логично и не удобно.

Пройдите курс по реакту от Юрия Бура на udemy, разберетесь в 90% реакта и подобного вопроса больше не возникнет