Блог

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

Два варианта:

1. Сохраните состояние в URL-адресе, добавив «/:state».

• Мы должны снова обратиться к конечной точке api, чтобы получить данные на основе состояния. Так что он всегда свежий
• URL-адрес можно сохранить в истории и скопировать / добавить в закладки
• Каждый раз, когда пользователь изменяет состояние, URL-адрес изменяется, вызывая перезагрузку страницы

2. Сохраните состояние в redux и сохраните его

• Необходимо установить пакет, подобный redux-persist, который требует некоторой настройки
• данные сохраняются при перезагрузке страницы, поэтому нам не нужен другой вызов API
• данные могут устареть и нуждаются в повторном извлечении

Какой вариант лучше? Какие сценарии нарушают любой из вариантов?

Каждый раз, когда пользователь изменяет состояние, URL-адрес изменяется, вызывая перезагрузку страницы, если вы используете что-то вроде react-router , приложение не перезагружается при каждом изменении URL.

Решение о том, где хранить некоторые настройки, зависит от конкретного случая. Обычно я предпочитаю хранить в URL только то, что связано с навигацией: изменение представлений / страниц, открытые модальности, поиск / фильтры. Обычно вы хотите сохранить его в URL, когда хотите, чтобы этот URL был доступен другим пользователям. Итак, если вы хотите указать какое-либо выпадающее значение в URL, подумайте: хотите ли вы, чтобы навигация в браузере изменила это значение? Меняет ли этот выпадающий список какое-либо представление?

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