Лучший способ вызова API в React
Вызов API — наиболее распространенная операция в веб-приложении. В большинстве случаев это повторяющийся код. React представил хуки, и это изменило способ написания кода. Крючки потрясающие, и мы все любим крючки. Теперь давайте используем хуки, чтобы решить эту проблему.
Проблема
Мы хотим сохранить ответы некоторых API, чтобы один и тот же ответ можно было использовать в разных компонентах без необходимости повторного вызова API.
Текущее решение
- Мы можем вызвать API в компоненте приложения и сохранить данные в глобальном состоянии или контексте, а затем использовать их во всем приложении.
- Мы можем вызвать API в первом компоненте, которому требуются данные, и оттуда сохранить их в глобальном состоянии.
Проблема с решением №1API будет вызываться независимо от того, смонтирован компонент, для которого требуются его данные, или нет.
Проблема с решением №2. Нам нужно убедиться, что компонент, который вызывает API, смонтирован до того, как будет смонтирован какой-либо потребительский компонент.
Новое решение
Создайте хук для настройки процесса инициализации. Этот хук будет вызывать API для нужного нам ресурса. Нам также нужно подписаться на изменения в запросе, чтобы API вызывался и ответ обновлялся автоматически.
Создайте перехватчики установки и получения для доступа к API-запросу. Это будет похоже на const [request, setRequest] = useState(RequestInitialState)
Создайте перехватчики установки и получения для доступа к ответу API. Это будет похоже на const [response, setResponse] = useState(ResponseInitialState)
Что мы создадим
Мы хотим создать пользовательский интерфейс со списком пользователей с функциями фильтрации и поиска. Вот его базовая схема.
И действие (+свет, +камера)
Мы будем использовать Recoil в качестве глобальной библиотеки управления состоянием. Recoil — это новая библиотека управления состоянием, более реактивная, разработанная Facebook.
Мы создадим часть состояния для хранения запроса и другое состояние для хранения ответа от API. Мы будем использовать Recoil.atom Simple правильно!
useLoadUsers будет нашим компонентом-инициализатором, этот компонент будет отвечать за настройку начального состояния и настройку побочного эффекта выборки пользователей при каждом изменении запроса.
Мы будем выставлять отдельные хуки для сеттеров и геттеров значений. Это гарантирует, что дополнительные повторные рендеры будут предотвращены, так как компонент будет требовать, чтобы только установщик не должен был подписываться на изменения значений.
Теперь пришло время использовать эти крючки!
Мы создадим компонент Users, который будет содержать все представление. Это будет вызов хука useLoadUsers для инициализации выборки пользователей с начальным состоянием.
Компонент UsersTable будет использоваться для отображения списка пользователей, этот список будет предоставлен хуком useUsers. Ответ этого будет аналогичен Recoil.Loadable, чтобы мы могли фиксировать состояния загрузки, успеха и ошибки ответа.
Компонент UsersFilter будет использовать запрос от useUsersRequest и setRequest от хуков useSetUsersRequest соответственно.
Вуаля! Никакие реквизиты не передаются от одного компонента к другому. Вот и хорошо.
Точно так же мы могли бы создать такие пользовательские хуки для доступа к ресурсу из API.
Здесь мы могли бы также использовать любую другую библиотеку для управления состоянием, такую как Redux или MobX, или даже Reacts context API, и решение осталось бы тем же.
Иногда лучше поваляться в постели в понедельник, чем тратить остаток недели на отладку кода понедельника 😂
🍔 Спасибо за прочтение
Получайте удовольствие, продолжайте учиться и всегда продолжайте программировать. Следуйте за мной на Medium и Linkedin.
🤝 Ставь лайк, делись, оставляй комментарий
Если у вас есть какие-либо вопросы или отзывы, дайте мне знать в комментариях ниже 👇
