Question

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

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

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

解决方案： 我尝试过使用会话存储和本地存储的一个解决方案，但我不相信解决方案。

如果有人能够更好地解决这个问题，那将会很棒。

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

}

重新加载后，在状态中保持用户活动

1 个答案: