0

I'm using react router v4, usually I don't have problem it, was working great even with @withRouter

this.props.history.replace("/dashboard")

but this time I have problem using it with redux.

https://codesandbox.io/s/pm0yvwp2jj

The route changed but why the component isn't rerendering? I should see content: clash of war if I go to dashboard/2, route is not switchable, only work if I refresh.

  • @Shubham, gerivedStateFromProps does not trigger when I put in `dashboard/index` –  Jun 27 '18 at 12:15
  • Since you want to fetch data, you should do so in componentDidUpdate function and not getDerivedStatefromProps. Also for getDerivedStateFromProps to work your react version needs to be >= v16.3 – Shubham Khatri Jun 27 '18 at 12:22
  • getDerivedStateFromProps did not trigger at all, checked the package.json, it's v16.3 –  Jun 27 '18 at 12:26
  • please update your sandbox, I will have a look at it – Shubham Khatri Jun 27 '18 at 12:27
  • @ShubhamKhatri thanks, updated the codesandbox.. but why should I use componentDidUpdate? it doesn't have nextProps for me to compare. Strange why should I even need to compare? usually this.props.history.push work just fine. –  Jun 27 '18 at 12:29
  • Please read the answer to duplicate question carefully, when params update, the component is not remounted but re-rendered with updated props – Shubham Khatri Jun 27 '18 at 12:30
  • getDerivedStateFromProps is a typo problem, just look the other question you asked. – devserkan Jun 27 '18 at 12:31
  • @ShubhamKhatri https://stackoverflow.com/a/48139367/9728810 typo for `getDerivedStateFromProps ` –  Jun 27 '18 at 13:00
  • @Melissa92, Thanks for pointing that out. I updated my answer there – Shubham Khatri Jun 27 '18 at 13:07
  • @ShubhamKhatri are you sure it can be solve using componentDidUpdate? See my latest codesandbox https://codesandbox.io/s/l53x2z4qpq, in Containers/dashboard/user/NotificationDetail, I always get the same object for `this.props.notification`. –  Jun 27 '18 at 13:11
  • What you are actually wanting to achieve is to fetch your notification anytime the route parameters change. This is a job for componentWillReceiveProps. If your route id parameter isn't equal between your current props and next props, dispatch fetchNotification. This should be done in an higher order component to keep things dry. I coded that quickly in your sandbox : https://codesandbox.io/s/6jy6y63o7r – Eld0w Jun 27 '18 at 15:06
  • @Eld0w why do you need hoc for this? usually container will contain many other component, so I will use componentWillReceiveProps once for each containers only –  Jun 28 '18 at 00:44
  • It really depends of your needs and preferences. The hoc could be used in any other place where you need your redux store loaded with notifications. (For example if you refresh the page). I prefer to put this kind of actions inside hocs as they could be needed in very various places of your app. You could also make a more generic one with the route params to check and the fetch action as arguments. – Eld0w Jun 28 '18 at 07:15
  • Usually I put this kind of hoc above the container class component. – Eld0w Jun 28 '18 at 07:25

0 Answers0