cauchy cauchy - 1 year ago 88
React JSX Question

Persist user activity in state after reload

I have created an application where user can search information related to movies using react and redux. While searching user can apply some filter(For eg. time duration). I want this filter to be active till user unselect them even after user reloads the page.

Current scenario user apply filter application will dispatch an event and store the filter information in Redux state.

But as soon as user refresh the page information about the filter get lost.

Solution Tried:
I have tried one solution using session storage and local storage, but I am not convinced with the solution.

It would be great if somebody can show better way of solving this problem if available.

Answer Source

For some simple states, like current value of filter, it would be better to use location.

For example, you have the following page:
Then you can preserve filter like this:

The benefit of this approach is simple: you explicitly say to user the actual state of the page, he can copy that, save bookmark, or send to somebody else.

To achieve this in React code, you can do the following (I assume that you have React-router in your app):

class UsersPage extends React.Component {

  // should be called somewhere in onClick
  filterUserGroup(groupName) {
        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