Как закешировать данные в ReactJS/Redux приложении?

Question

[Vladimir Konovalenko]

Всем привет!
Пишу приложение на React/Redux. Есть массив из 2500 объектов, который запрашиваю с сервера. Хотелось бы где-то его закешировать, но не знаю где..
Можно сохранять его в стейте, но при обновлении страницы он будет подгружаться заново...

Answer 1

[Сергей Сунцев]

Сохраняй в локальное хранилище
Redux Persist тебе поможет
Есть еще redux-offline , но она менее популярная штука

Answer 2

[Robur]

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

Comments

[Vladimir Konovalenko]

Окей, а если сохраню в localStorage и сделаю проверку пустой он или нет, то как понять, что массив изменился и его надо перезаписать в хранилище?

Второй вариант вроде бы тоже подходит, изменения бывают примерно раз в год)

[Robur]

Vladimir Konovalenko, эта проблема инвалидации - как понять это только вы для своих данных можете решить.
например обновлять раз в месяц. или после старта приложения в фоновом режиме делать запрос и обновлять. или еще что. В кратце про инвалидацию кеша тут: https://www.martinfowler.com/bliki/TwoHardThings.html

Это не относится к способу кеширования - с любым будет то же самое.

[Николай Домбровский]

Vladimir Konovalenko, помещайте маркер (какой-нибудь id/дату последнего обновления/версию/hash). Запрашивайте с сервера актуальный маркер, если разные - перезапрашивайте.