Preventing component updates from multiple props in react

Question

I have a react/redux app which has a recharts chart which animates when data is changed.

I'm using Redux and most of my actions only change a single state property which results in a single props pass. However, some of my actions are now using thunks for some async actions and calling other actions.

For example, I might have an action getChartData which would be called when the user selects an axis.

export let getChartData = axis => dispatch => {
  // trimmed for brevity
  fetchJSON(url).then(data => {
    dispatch(dataRetrievalSuccess(data));
    dispatch(updateSelectedAxis(axis));
  }).catch(error => {
    dispatch(dataRetrievalError(error));
  });
};

In this example the updateSelectedAxis value will change a local state property responsible for displaying the currently selected axis and the dataRetrievalSuccess function would be responsible for passing props.data to the chart.

The problem I'm trying to solve is to prevent the chart from updating when the selectedAxis props of the component change but the data hasn't.

I thought I would be able to use something like componentWillRecieveProps but the issue I have here with my above thunk example is that I get one call to componentWillRecieveProps when I call dataRetrievalSuccess which has the same data in both this.props.data and nextProps.data so I can prevent the update. However when I subsequently call updateSelectedAxis I don't have the data as part of the props as it's already changed, so I can't perform logic operations based on the two values.

I thought this was possibly an ordering issue, but even if I pack this into a single action I still get multiple setting of props.

Would I solve this issue by packaging up the data and the change of axis into a single object? I'm not quite sure the best way to go about this architecturally and would welcome any suggestions.

EDIT: Just to expand a little, I am dispatching two actions, both which change their own bit of state which causes two renders.

I've tried writing something like this:

shouldComponentUpdate(nextProps, nextState) {
  if(this.dataHasChanged(nextProps)) {
    return true;
  }
  return false;
}

Which almost works, but each time the data the chart shows is one render behind where it needs to be.

Answer 1

You can access the current State of store under action creator using thunk (as thunk inject the state for you.) , then compare ajax response data with previous state data to dispatch new action.

 export let getChartData = axis => (getState, dispatch) => {
          // trimmed for brevity
          fetchJSON(url).then(data => {
           if(getState().data !== data){
            dispatch(dataRetrievalSuccess(data));
            dispatch(updateSelectedAxis(axis));
            }
          }).catch(error => {
            dispatch(dataRetrievalError(error));
          });
        };