Question

我正在尝试使用redux进行反应。不调用mapStateToProps。

调度调用正常工作，操作到达reducer并返回newState并修改存储的状态。但是没有调用mapStateToProps并且组件没有重新渲染。

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);

使用更新状态的其他类如下

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);

行动如下

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

}

减速器是

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

我甚至使用redux dev工具进行了检查。 chartData正在redux商店中更新。 chartData正确传递给Chart类，并在第一次更新时呈现。在连续调度时，chartData在redux存储中更新，但不调用Chart类的mapStateToProps，并且Chart类不重新渲染。

更新

我试图更新图表，如果chartData数组中的少数条目发生更改，则无法呈现。

我注意到图表组件在整个chartData更改时会重新呈现。但是如果图表数据的任何部分发生变化，我希望它能够重新发布。

Answer 1

修改：请务必在您的reducer之外关注immutable update patterns（在您的情况下采用updateChartData()方法）。

您可能在{＆＃34; data＆＃34;中变异...logic...，您可以使用immutable-js让您更轻松。

MapStateToProps不起作用

1 个答案: