update state when url changes in redux-react

Question

I have a Profile component that shows user profile. On route change to user/:userId, the userId query param will be updated in ownProps thanks to react-router-redux and will then be passed into my presentation component:

const mapStateToProps = (state, ownProps) => ({
  userId: ownProps.params.userId,
  user: store.profile.user //null at first, will be updated later
})

At this point, I need to fetch user profile from userId. Where should I do this fetching? Currently I am doing it in componentDidMount

componentDidMount() {
  this.props.fetchProfile(this.props.userId)  //this will dispatch an action to fetch user details and store in `store.profile.user`
}

The downside of this is if user goes from /users/1 to /users/2, componentDidMount wont trigger. How should this be done?

Gunther Konig · Accepted Answer · 2016-06-09 12:19:52Z

1

You also need to call this.props.fetchProfile from your component's componentDidUpdate method, with an (optional) additional check to see if the userId actually changed. Better yet, you should wrap the call of fetchProfile in a separate method, just in case you'd like to skip the call if the userId is null, for example.

fetchProfile() {
  this.props.userId && this.props.fetchProfile(this.props.userId)
}

componentDidMount() {
  this.fetchProfile()
}

componentDidUpdate (prevProps) {
  prevProps.userId !== this.props.userId && this.fetchProfile()
}

answered Jun 9, 2016 at 12:19

Gunther Konig

1821 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

update state when url changes in redux-react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related