Sam Sam - 2 months ago 11
React JSX Question

Execution order issue in React/Redux app

I have a React/Redux app that features a date picker.

Here's the simplified version of my code:

handleChangeDate(date) {

// First, I set the new date in my redux store
this.props.actions.setDate(date);

// Check some condition
if(a !== b) {

// I then call a callback function that is passed as a prop from the parent component
return this.props.someCallBackFunction();
}

}


Here's what's happening:


  • Initially everything works fine

  • Once I set the new date, the
    someCallBackFunction()
    seems to be firing first which pulls the active date from the store and makes an API call. But because the date hasn't changed yet, I get the same data as before I initiated the date change

  • When I change the date once more, the same things are happening as I described above but it now uses the date from previous step.



In other words, the execution order is reverse so I always end up getting a data set for the date I set in my previous action.

Any idea what may be causing this and how to fix it?

P.S. The callback function gets the active date from the redux store which is why I'm not passing it. I like the idea of using the redux store as the single source of truth but I somehow need to fix the execution order issue.

Answer Source

If that's the case, it doesn't seem like you should be handling the callback inside of this handler. Have you considered using the lifecycle method componentWillUpdate() ?

Take a look at the first few examples here, they might help.

https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/tapping_into_componentwillupdate.html