React+Redux中mapStateToProps未触发致组件不重渲染问题

看起来你遇到的是Redux中浅比较导致组件不重渲染的典型问题，我来帮你拆解并解决：

问题根源 #

Redux的connect方法内部会对mapStateToProps返回的对象做浅比较：如果前后两次返回的chartData引用完全相同，Redux就会认为状态没有变化，不会触发组件的重渲染。

当你仅修改数组的部分元素时（比如chartData[1] = newVal），这是原地修改数组，数组的引用并没有改变——Redux检测不到这种变化，所以Chart组件的mapStateToProps不会触发，自然也不会重渲染。而当你替换整个数组时，新数组的引用和原数组不同，Redux就会识别到状态变化，触发更新。

解决办法 #

1. 始终返回新的数组引用（推荐，符合Redux immutable原则） #

Redux要求状态必须是不可变的，所以永远不要直接修改原state数组，而是创建一个新数组来承载修改后的内容。

情况A：你的action传递的是要修改的具体位置和值

修改你的reducer，通过复制原数组、修改副本后返回新数组：

export default function (state = [], action) { 
  if (action.type === actionTypes.CHANGE_CHARTDATA) {
    // 用展开运算符创建原数组的浅拷贝
    const newChartData = [...state];
    // 修改拷贝后的数组
    newChartData[action.index] = action.newValue;
    // 返回新数组
    return newChartData;
  } 
  else { 
    return state; 
  } 
}

情况B：你的action仍然传递整个修改后的数组

那要确保在生成modifiedData时，是创建了新数组而不是修改原数组：

updateChartData (data) {
  // 不要直接修改this.props.chartData（它是Redux state的引用，不可变）
  const modifiedData = [...this.props.chartData]; // 复制原数组得到新引用
  // 在这里进行你的修改逻辑，比如 modifiedData[0] = xxx;
  this.props.actions.chartDataAction(modifiedData);
}

2. 关闭connect的纯组件优化（不推荐，仅应急用） #

如果因为某些场景无法创建新数组，可以在connect时设置pure: false，强制组件每次store变化都重渲染。但这会牺牲性能，因为不管状态是否真的变化，组件都会更新：

export default connect(mapStateToProps, null, null, { pure: false })(ChartComponent);

额外验证点 #

• 检查actionTypes.CHANGE_CHARTDATA常量是否拼写正确，避免reducer漏掉action处理
• 用Redux DevTools确认：每次dispatch后，chartData的引用是否真的更新了（而不是同一个数组的内容变化）

内容的提问来源于stack exchange，提问作者Rangarajan