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

Question

[smartbe]

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

1). Инкапсулировать API в отдельный класс

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

Или есть более современные и упрощённые методы?

Comments

[Макс]

> Инкапсулировать API в отдельный класс

Простите мое занудство, но инкапсуляцией здесь и не пахло

[smartbe]

Максим, Но это же лежит в отдельном классе и снаружи просто так изменить сложно? Почему тогда не пахло инкапсуляцией?

[Макс]

smartbe, если учитывать как работают классы без синтаксического сахара, то все можно заменить с помощью манкипатчинга. Да, это будет что-то из серии сам себе злой буратино, но тем не менее.

С не пахнет, я, наверное, погорячился, не обессудьте, некоторые задатки действительно есть, если смотреть не со стороны сокрытия состояния экземпляра объекта.

Answer 1

[Владислав Афанасьев]

С появлением хуков, классы можно не использовать.
Лучше всего использовать 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%...

Comments

[smartbe]

То есть action creator который построен при помощи thunk будет заменять логику инкапсулированного класса?

Answer 2

[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>
  );
};

Answer 3

[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));

Comments

[G F]

А в чем смысл конкатенации шаблонных строк.

[Mdmitr]

fomenkogregory, не заметил что кавычки обратные

Answer 4

[Konstantin Travin]

Привет, у тебя дальше в курсе будет про это))

Comments

[Vlad Osadchyi]

Похоже на курс Юры ;)

[Konstantin Travin]

Это он и есть)

[smartbe]

Да, это он и есть)

Answer 5

[nickname13384]

Перепиши класс на функцию и все, я так уже делал

Comments

[smartbe]

А можете пример показать, если есть?

[nickname13384]

smartbe, завтра могу пример скинуть, просто компьютер уже выключил. У меня все на асинхронных функциях стрелках