MapStateToProps not working

Question

I am trying to use redux with react. The mapStateToProps is not called.

The dispatch calls are working properly, the action reaches the reducer and the newState is returned and the state of the store is modified. But mapStateToProps is not called and the component is not rerendering.

class Wrapper extends React.Component {
      updateChartData (data) => {
        ...logic...
        this.props.actions.chartDataAction(modifiedData);
        }
}

function mapStateToProps(state, ownProps) {
    return {
        chartData: state.chartData
        };
}

function mapDispatchToProps(dispatch) {
      return {
      actions: bindActionCreators(chartDataAction, dispatch)
      };
}

export default connect(mapStateToProps, mapDispatchToProps)(Wrapper);

The other classes that use updated state is as follows

class Chart extends React.Component {
    render(){
        /*console.log(this.props.chartData);*/
    }
}

function mapStateToProps(state, ownProps) {
    console.log(state);
    return {
        chartData: state.chartData
    };
}

let ChartComponent = withStyles(styles)(Chart);

export default connect(mapStateToProps)(ChartComponent);

The action is as follows

export default function (state = [], action) {
if (action.type === actionTypes.CHANGE_CHARTDATA) {
    return action.chartData;
} else {
    return state;
}

}

The reducer is

export default function (state = [], action) {
    if (action.type === actionTypes.CHANGE_CHARTDATA) {
        return action.chartData;
    } else {
        return state;
    }
}

I've even checked using redux dev tools. The chartData is being updated in the redux store. The chartData is properly passed to the Chart class and it renders on the first update. On consecutive dispatching, the chartData is updated in the redux store, but the mapStateToProps of Chart class is not called and the Chart class is not rerendering.

UPDATE:

I'm trying to live update the chart and it does not render if the few entries in the chartData array are changed.

I noticed that the chart component rerenders when the whole chartData is changed. But I want it to rerender if any part of the chartData is changed.

And you are sure that the Chart component is rendered on the page when you are firing the action. — Krasimir
Yes. The chart component renders the first time and the chart is plotted. When the chartData is altered, the state of the store is updating, but the chart component is not rerendering — Rangarajan
By the way, the chart Component rerenders with new chartData when I interact with the ui and change the other props of the chart component. It is not rerendering automatically when props.chartData is changing — Rangarajan
Could your problem be that your action creator passes dataTable but you expect to receive chartData? — nem035

Dyo Dyo · Accepted Answer · 2018-01-22T12:07:17

Edit : Be sure to follow the immutable update patterns even outside of your reducer (in updateChartData() method in your case).

You are probably mutating data in your "...logic...", you can use immutable-js to make it easier for you.

MapStateToProps not working

1 Answers