@Goshan41k

Как правильно организовать загрузку данных в React?

Привет, подскажите пожалуйста пару деталей, для более ясного представления приведу пример. Один из самых популярных примеров приложения на React это Todo-app. Представим вот этот самый Todo-app, и добавим сюда простенькую регистрацию/авторизацию и хранение заметок на сервере в базе данных.

Я вижу два варианта получения данных, но не понимаю какой правильный(или оба правильные?):
1. На чистом React. В самом компоненте, при помощи componentDidMount или useEffect отправлять запрос через fetch или axios, а ответ записывать в state. А на основании state отображать или лоадер, или массив компонентов-"заметок".

2. Добавить redux, react-redux и какой-нибудь middleware. Создать store, объявить там isLoading, isLoaded, data, isError. Написать ещё 4 action generator: fecth, request, response, error, и обрабатывать запрос как сайд-эффект в redux-saga или fetch в redux-thunk. А на страничке отображать лоадер на основании store.getState() или props с connect()().

Так вот, как правильнее то? Или оба подхода правильны? Когда какой использовать? Или оба неправильны?
  • Вопрос задан
  • 125 просмотров
Решения вопроса 1
@abberati
frontend-разработчик
Оба правильные. Если приложение настоящее, то второй правильнее. Если это тудулист/мелкий петпроект, то первый вариант. Первый быстрее, второй масштабируется лучше.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@McBernar
Используйте redux, когда нужно делить общий стейт между компонентами. Для одного конкретного компонента же прекрасно используется didMount.
Ответ написан
Ваш ответ на вопрос

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

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