Где делать запросы на РЕАКТЕ?

Question

[Анастасия]

Здравствуйте, недавно занялась web-разработкой и такой вопрос.
У меня есть api на php

Так же есть реакт компоненты, которые берут данные из api и отображают в приложении

Где мне делать все эти запросы? Прям в каждом компоненте?
Или делать отдельный компонент для получения всех нужных данных а затем передавать в качестве пропсов по разным компонентам?
Так же в этом приложение есть авторизация пользователя

Скажите пожалуйста как правильно это реализуется, может паттерн какой-то я не знаю там

Comments

[Вадим]

Ну, видимо, Вам стоит погуглить про "умные" и "глупые компоненты".
Они же containers and components.
Ну и напрямую вбить вопрос в гугл в каком хуке делать запрос. Зависит от того, классовые у Вас компоненты или функциональные, ответ может отличаться.

Answer 1

[Eugene Usachev]

Есть простое решение, которое изучают все новички React, оно подразумевает использовать useState в верхних компонентах, через useEffect с пустым массивом зависимостей заполнить этот state и пробросить его ниже.
Однако лучше использовать стейт менеджер. Я не смогу описать их в одном ответе, но советую вам погуглить про них. Самый популярный (с большим отрывом) - Redux (смотрите так же Redux-thunk и Redux-saga). Однако я бы посоветовал использовать MobX или Zustand так как они тоже популярны, но значительно удобнее. Судя по вашему запросу, я бы посоветовал начать с useState и useEffect.
Не относится к теме вопроса, но вам стоит посмотреть плейлист "Мощнейшая практика" от uldi TV, так как автор не просто показывает, как использовать React, но и делает акцент на лучших паттернах и структуре.

Answer 2

[n1ksON]

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

В общем случае, используется стейт-менеджер, типа redux. Данные попадают в нужную компоненту напрямую с помощью useSelector, дальше при необходимости в "глупые" компоненты пробрасываются пропсы.
Запросы из компонент диспатчатся и выполняются/организуются через redux-saga, например.