React-Redux中mapStateToProps触发但组件未重渲染问题求助

看起来你的核心问题是Redux状态已经更新，但组件没有接收到新的props，因此不会触发更新逻辑。结合你的代码，我认为最可能的原因是mapStateToProps没有正确从Redux的根状态中获取你的ImageStoreState切片。

1. 根状态结构不匹配 #

通常我们会用combineReducers将多个reducer组合成根reducer，比如你的imageActionReducer可能是挂载在根状态的某个key下（比如image），类似这样：

import { combineReducers } from 'redux';

const rootReducer = combineReducers({
  image: imageActionReducer // 你的图片状态切片挂在`image`这个key下
});

但你的mapStateToProps函数直接把参数state当成了ImageStoreState，尝试直接解构state.name：

export function mapStateToProps(state: ImageStoreState) : IAddImageControlProps {
  const { name } = state; // 这里的state其实是根状态，不是ImageStoreState！
  // ...
}

这会导致不管Redux里的图片状态怎么变，你取到的name始终是undefined，组件的imageChosenprops没有变化，自然不会触发componentWillReceiveProps，也不会重新渲染。

修复方法 #

修改mapStateToProps，正确从根状态中取出你的图片状态切片：

// 先定义根状态的类型
interface RootState {
  image: ImageStoreState; // 对应你combineReducers时的key
}

export function mapStateToProps(rootState: RootState) : IAddImageControlProps {
  const { name } = rootState.image; // 从根状态的image切片中取name
  console.log("Add image control container, mapStateToProps", rootState.image);
  return { imageChosen: name }
}

同时更新connect的泛型参数，第四个参数应该是根状态的类型，而不是ImageStoreState：

export const AddImageControlContainer = connect<IAddImageControlProps, {}, IAddImageControlProps, RootState>(
  mapStateToProps, 
  mapDispatchToProps
)(AddImageControl);

2. 确认使用的是容器组件 #

确保你在应用中渲染的是AddImageControlContainer（连接Redux的容器组件），而不是原始的AddImageControl展示组件。如果直接渲染展示组件，它不会订阅Redux状态的变化，自然无法收到更新。

3. 替换已废弃的生命周期方法 #

另外，componentWillReceiveProps已经被React官方废弃，建议使用componentDidUpdate来监听props变化：

public componentDidUpdate(prevProps: IAddImageControlProps) {
  // 只有当imageChosen变化时才执行逻辑
  if (prevProps.imageChosen !== this.props.imageChosen) {
    console.log('componentDidUpdate - imageChosen changed', this.props.imageChosen);
  }
}

验证步骤 #

1. 在mapStateToProps中打印整个rootState，确认它包含你的ImageStoreState切片；
2. 触发saveImageMeta action后，检查mapStateToProps中的rootState.image.name是否正确更新；
3. 确认组件渲染的是容器组件而非原始展示组件。

按照这个思路调整后，你的组件应该能正确响应Redux状态的变化了！

内容的提问来源于stack exchange，提问作者Richard.Wang