Как работать с API сервиса в React?

Здравствуйте. Правильно ли с появлением хуков организовать так работу с API?

1). Инкапсулировать API в отдельный класс
5e6df59593ff6065207614.jpeg
2). Прокинуть этот файл через контекст
3). В отдельных компонентах при помощи контекста вызывать нужные функции для работы с API

Или есть более современные и упрощённые методы?
  • Вопрос задан
  • 1302 просмотра
Решения вопроса 3
С появлением хуков, классы можно не использовать.
Лучше всего использовать Redux и thunk.

Обратится к action можно через хук "useDispatch" в компоненте.
После получения данных с api, лучше передать их в reducer и там изменить.

Документация: https://react-redux.js.org/next/api/hooks
Redux-thunk: https://xakplant.ru/2019/12/11/%D0%B7%D0%B0%D1%87%...
Ответ написан
profesor08
@profesor08
Любым удобным способом получаешь данные от API, потом помещаешь их в state, или в store. А в своих компонентах уже используешь эти данные непосредственно из самого хранилища. Таким образом при получении данных, компонент сам обновится.
import React, { useState, useEffect } from "react";

export const Users = () => {
  const [users, setUsers] = useState<IUser[]>([]);

  useEffect(() => {
    async function load() {
      setUsers(await ApiService.getUsers());
    }

    load();
  });

  return (
    <UsersContainer>
      {users.map((user, id) => (<User>{user.name}</User>))}
    </UsersContainer>
  );
};
Ответ написан
@Mdmitr
вот моя реализация на функциях, как и обещал вчера

const api = "/api";

const getApi = async url => {
  const res = await fetch(`${api}${url}`);
  if (!res.ok) {
    throw new Error(`Error ${url}` + `,  ${res.status}`);
  }
  return res.json();
};

const getAll = async () => {
  const res = await getApi("/person");
  return getPerson(res)
};

getAll().then(res => console.log("res", res));
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@kotrvn
Front-end developer
Привет, у тебя дальше в курсе будет про это))
Ответ написан
@nickname13384
Перепиши класс на функцию и все, я так уже делал
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы