johnymkp
@johnymkp

Как в react работать с большим количеством данных?

Пишу приложение (на реакте) для удобного просмотра статистики сыгранных матчей и расчета некоторых дополнительных параметров. С сервера мне приходит статистика в виде массива матчей (идентификатор матча, длительность и т.д.). Этих матчей может быть очень много, до нескольких тысяч (пусть будет например 5000), и приходят они одним махом (функции пагинации сервер не предоставляет).

Чтобы отобразить ту информацию по матчу, ради которой я и пишу приложение, мне нужно сделать дополнительный запрос для каждого матча, а на основе полученных данных еще несколько запросов. Затем все полученные данные обсчитать и уже вывести на экран как "статистика матча".

Я думаю сделать так: на старте приложения загрузить весь массив матчей (все эти условные 5000), но показывать их небольшими страницами ("пачками", штук по 10 матчей) и для матчей на текущей странице уже подгружать дополнительную информацию, нужную для расчетов.

Однако, при смене страниц, я хочу чтобы уже загруженная раньше информация не стиралась, а оставалась в памяти, потому что количество запросов на сервер в сутки лимитировано. Если человек возвращается на предыдущую страницу, то не должна происходить повторная загрузка с сервера - данные должны браться из кэша.

Плюс некоторые данные являются "стационарными". Например, id персонажа и его имя. Их можно разом загрузить и дальше тащить уже не с сервера, а локально.

Что мне понадобится, чтобы это все реализовать? Вероятно, мне нужен стейт-менеджер. Если да, то какой? Или если не нужен, то что нужно вместо него?
  • Вопрос задан
  • 131 просмотр
Решения вопроса 1
Kentavr16
@Kentavr16
long cold winter
Путей решений большое количество, и они зависят от твоих хотелок.
Вариант а - с кульбитами, но я бы так сделал. Пишешь небольшой бекенд на экспрессе для своего приложения. На беке с помощью cron например раз в день/час/несколько минут делаешь запрос на нужное апи, записываешь в своей бд ответ. Вопрос с лимитом запросов решен. далее делаем пагинацию на своем сервере (очень простое действие) и отправляешь пользователю человеческий ответ по АПИ, который будет соответствовать всем твоим запросам и нуждам. На фронте остается допилить простое СПА без извращений и сложностей.
Вариант б - сохраняешь ответ на клиенте, обновляешь кеш раз за n-ное время, как предложено выше. В таком случае проще всего действительно использовать локалстор для хранения ответа по АПИ. Если хочется более продвинутой работы, обрати внимание на indexedDB -есть несколько интересных адаптеров для реакта, которые упрощают работу.
Вопрос с сохранением данных при переходе на другую страницу решается просто (я догадываюсь что под другой страницей ты подразумеваешь роутинг в react SPA). Это либо хранение состояния на верхнем уровне приложения, либо стейт менеджер. Внимание - стейт-менеджер только упрощает(!!!) обращение со сложным стейтом в относительно больших приложениях. Это не панацея, по факту он делает то же самое что и обычный хук стейта. Тебе скорее всего не принципиально, но при желании пришить условный zustand можно. Это вкусовщина.
Можно вообще написать кастомный хук для работы с локалстором/индекседДБ и юзать на каждой странице, считывая при заходе на каждую страницу данные и одновременно проверяя их "свежесть". Тогда стейт менеджеры точно не нужны от слова совсем.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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