reactjs - 重新加载后将用户事件保留在状态中

Question

我创建了一个应用程序，用户可以使用react和redux搜索与电影相关的信息。在搜索时，用户可以应用一些过滤器(例如持续时间)。我希望此过滤器处于事件状态，直到用户取消选择它们，即使用户重新加载页面后也是如此。

问题:当前场景用户应用过滤器应用程序将调度一个事件并将过滤器信息存储在 Redux 状态中。

但是一旦用户刷新页面，有关过滤器的信息就会丢失。

尝试的解决方案:我尝试过一种使用 session 存储和本地存储的解决方案，但我对该解决方案并不信服。

如果有人能够展示解决此问题的更好方法(如果有)，那就太好了。

Answer 1

对于一些简单的状态，比如过滤器的当前值，最好使用位置。

例如，您有以下页面:http://example.com/users。
然后您可以像这样保留过滤器:http://example.com/users?group=admin。

这种方法的好处很简单:您明确地告诉用户页面的实际状态，他可以复制该状态、保存书签或发送给其他人。

要在 React 代码中实现此目的，您可以执行以下操作(我假设您的应用程序中有 React-router):

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
        });
    }
  }

}