父/子组件中MapStateToProps与MapDispatchToProps失效问题排查

我一眼就找到问题啦！你的功能失效是因为在App.js中导入了未连接Redux的原始Heading组件，而非经过connect包装后的容器组件，导致它无法获取Redux Store中的状态值。

具体分析 #

看你的heading.js代码：

// 原始组件（未连接Redux）
export class Heading extends Component { /* ... */ }

// 连接Redux后的容器组件（默认导出）
let headingContainer = connect(mapStateToProps)(Heading);
export default headingContainer;

你同时做了命名导出（原始Heading组件）和默认导出（连接Redux的容器组件）。但在App.js里，你用了：

import {Heading} from './components/heading';

这会导入那个没有连接Redux的原始Heading组件——它根本没有通过mapStateToProps绑定Redux状态，自然无法读取this.props.value。

修复步骤 #

只需要修改App.js中的导入语句，改成导入默认导出的容器组件即可：

// 去掉大括号，导入默认导出的容器组件
import Heading from './components/heading';

额外优化建议 #

你的mapDispachToProps拼写有误（应该是mapDispatchToProps，小写d），虽然当前对象形式的写法不影响功能，但建议修正为正确拼写，养成规范的编码习惯：

let mapDispatchToProps = {
  increment: () => { return {type:"INCREMENT"} }
}

修改完成后，点击按钮触发INCREMENT action时，Redux Store更新状态，Heading容器组件会通过mapStateToProps拿到最新的value并正常展示啦！

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