CODEWITHSUNDEEP
apireactjsredux
Candy
Candy

Reputation: 694

how to call a function on page refresh in react-redux?

Iam doing an app in react-redux and i want to hold my redux store on page refresh and thought to not make use of predefined libraries and hence i set the redux state to local state and making the api call in componentWillUnmount to restore redux state on page refresh.But i couldnt do that. Is their any approch to acheive this:

And my code is:

componentWillMount(){
    this.setState({
        activeUser:this.props.activeUser
    })
}
componentWillUnmount(){
    this.props.loginUser(this.state.activeUser.user);
}

activeUser is my redux state and this.props.loginUser() makes api call.And i tried of using event handlers as:

componentDidMount(){
    window.addEventListener('onbeforeunload', this.saveStore)
}

componentWillUnmount(){
    window.removeEventListener('beforeunload', this.saveStore)
}

saveStore(){
    this.props.loginUser(this.state.activeUser.user);
}

but it didn't worked for me.

Upvotes: 2

Views: 2965

Answers (1)

Yasser Hussain
Yasser Hussain

Reputation: 854

My understanding is that what you basically are trying to do is that, you want to persist your app state (user info, etc) between reloads.

One can use the localStorage API to achieve this effect.

I'll give one possible solution down here.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {activeUser: null};
  }

  componentWillMount() {
    let activeUser = localStrorage.getItem("activeUser");
    if (activeUser) {
      this.props.receivedActiveUser(JSON.parse(activeUser));
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({activeUser: nextProps.activeUser});
  }

  componentWillUnmount(){
    if (this.state.activeUser) {
      localStorage.setItem("activeUser", JSON.stringify(this.state.activeUser));
    }
  }
}

Ofcourse, you'll have to create a receivedActiveUser action which will update the store appropriately.

Upvotes: 1

Related Questions