Куда сохранять полученные с сервера данные в React для дальнейшего рендера?
Добрый день!
Разрабатываю React-приложение. При работе с сервером возник вопрос, куда сохранять принятые через fetch данные и как его рендерить? На данный момент этим занимается componentDidMount: как только компонент загрузился, шлем запрос на сервер, пока запрос обрабатывается показываем спиннер, когда данные получены, сохраняю результат в state, скрываем спиннер и рендерю данные.
Теперь, когда я добавляю новый элемент, что должен вернуть сервер в ответ и как заново отрендерить данные? Должен ли сервер вернуть последние N записей, в котором будет новый элемент как последний добавленный? Или вернуть только добавленный элемент, но тогда React-должен отрендерить этот элемент в соответствии с сортировкой, удалить лишний не вмещяющийся элемент и обновить пагинацию (если требуется)? При таком подходе, кажется слишком много телодвижении, проще заредиректить на эту же страницу, чтобы компонент снова послал запрос и получил данные. В общем вариантов хватает. Подскажите, как правильно поступить? Какая практика более распространенная? Извиняюсь, если сумбурно. Заранее спасибо
Для этого придумано много решений, но все они называются одним термином — стейт-менеджер. Примеры: redux, mobx, effector, reatom. В «настоящих» приложениях компоненты реакта не содержат логики о выполнении запроса и хранении данных, они ничего не знают о бизнес-логике системы. С помощью разного рода коннекторов (у каждого менеджера свои) компоненты подключаются к стору/сторам с данными и занимаются только отображением этих данных.
Спасибо за ответ. Redux - это тот же state, но только глобальный и в большинстве средних проектов можно и без него обойтись. В моем проекте структура до безобразия проста, только ради обновления данных подключать redux думаю избыточно. Вопрос каким образом обновлять данные все еще открыт
Евгений Петров, нет, redux — это не тот же стейт. Кроме «глобальности» redux вносит много важных деталей — отделение логики от представления (о котором написана не одна книга), архитектурные ограничения, оптимизации производительности, список можно продолжать очень долго.
Возьмите реатом, если вам не нравится развесистость redux. Без стейт-менеджера можно обойтись только в туду-листе или любом другом приложении с одной-двумя сущностями, но никак не в «средних» проектах.
Поверьте моему опыту — вы не захотите (и не сможете) развивать и поддерживать приложение без стейт-менеджера.
Ответ на вопрос «каким образом обновлять данные» всё тот же — так, как предлагает это делать используемый стейт-менеджер.
Средний