Сохранять активность пользователя в состоянии после перезагрузки

Question

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

Задача: Приложение, применяющее фильтр текущего приложения, отправит событие и сохранит информацию о фильтре в состоянии Редux.

Но как только пользователь обновит страницу, информация о фильтре будет потеряна.

Решение: Я пробовал одно решение, используя хранилище сеансов и локальное хранилище, но я не уверен в решении.

Было бы здорово, если бы кто-нибудь мог показать лучший способ решить эту проблему, если таковой имеется.

Answer 1

Для некоторых простых состояний, таких как текущее значение фильтра, было бы лучше использовать местоположение.

Например, у вас есть следующая страница: http://example.com/users.
Затем вы можете сохранить фильтр следующим образом: http://example.com/users?group=admin.

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

Для достижения этой цели в React код, вы можете сделать следующее (я предполагаю, что у вас есть React-маршрутизатор в вашем приложении):

class UsersPage extends React.Component { 

    // should be called somewhere in onClick 
    filterUserGroup(groupName) { 
    this.props.router.push({ 
     pathname: this.props.location.pathname, 
     query: { 
      group: groupName 
     } 
    }); 
    } 

    componentWillReceiveProps(nextProps) { 
    if(nextProps.location !== this.props.location) { 
     //filter was changed, you can apply new filter value 
     this.setState({ 
      selectedGroup: nextProps.location.query.group 
     }); 
    } 
    } 

}