Javascript React redux connect（）无法通过道具

我试图学习react redux架构，但在最基本的东西上我失败了

我创建了类主页，并使用react redux connect（）将其连接到存储的状态和分派

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从“/HomeActionReducer”导入{HomeButtonClickAction}；
从“react redux”导入{connect}；
类主页扩展组件{
建造师（道具）{
超级（道具）；
console.log（“主页道具”）；
console.log（this.props）；
this.buttonClicked=this.buttonClicked.bind（this）；
}
按钮点击（）{
console.log（'button cliked'）；
此.props.buttonClick（）；
}
render（）{
log（'Re-rendering…'）；
让toggleState=this.props.toggle？'ON'：'OFF'；
返回(
{toggleState}
)
}
}
HomePage.propTypes={
切换：需要PropTypes.bool.isRequired，
onClick:PropTypes.func.isRequired
};
const mapStateToProps=（state，ownProps）=>{
返回{
切换：state.toggle
}
};
const mapDispatchToProps=（调度，ownProps）=>{
返回{
按钮单击：（）=>{
调度（HomeButtonClickAction（））；
}
}
};
const HomeContainer=connect(
MapStateTops，
mapDispatchToProps
)（主页）；
导出默认主页您正在导出
主页
，它是表示组件。您想导出
HomeContainer
，它是通过
connect
将道具传递到
HomePage
的容器

所以换掉这个

导出默认主页；

用这个

导出默认HomeContainer；

你也可以直接写

导出默认连接（mapStateToProps、mapDispatchToProps）（主页）；


请注意，由于它是默认的导出，因此可以根据需要命名导入，例如：

从“./HomePage”导入主页//即使导出的是HomeContainer
您有：

const HomeContainer = connect(
    mapStateToProps,
    mapDispatchToProps
)(HomePage);

export default HomePage;

要创建连接组件的实例，需要执行以下操作：

导出默认连接（）（主页）

请注意，我没有编写两次
export default
，这是一种糟糕的做法，每个组件只
export default
一次，因此
connect（）
位于同一行代码中，并且调用或第二组圆括号围绕着正在使用的组件

此
connect（）
函数实际上是一个React组件，您将向其传递一些配置，开始执行此操作的方法是调用
MapStateTrops
，如下所示：

const mapStateToProps = () => {

};

export default connect()(HomePage);

你也可以这样做：

function mapStateToProps() {

}

如果您阅读了它，它是有意义的，这意味着我们将映射我们的状态对象，redux存储中的所有数据，并运行一些计算，这些计算将导致这些数据显示为组件中的道具，这就是
MapStateTrops
的含义

从技术上讲，我们可以随意调用它，它不必是mapStateToProps，但按照惯例，我们通常将其称为mapStateToProps，它将与redux存储中的所有状态一起调用

const mapStateToProps = (state) => {

};

export default connect()(HomePage);

状态对象包含您试图从redux存储访问的任何数据。您可以通过在函数中记录控制台状态来验证这一点，如下所示：

const mapStateToProps = (state) => {
  console.log(state);

   return state;
};

export default connect()(HomePage);

我返回状态只是为了确保一切正常

定义该函数后，将其作为第一个参数传递给
connect（）
组件，如下所示：

const mapStateToProps = (state) => {
  console.log(state);

   return state;
};

export default connect(mapStateToProps)(HomePage);

这就是我们配置连接组件的方式。我们通过传递函数来配置它。运行该命令，看看会发生什么。
注意，如果您复制并粘贴错误消息而不是发布屏幕截图，则会更有帮助。在PropTypes中，您可以根据需要进行onClick，但仅从容器传递buttonClicked（）。这对我来说似乎很奇怪。在reducer as状态中，我将创建任何初始状态，这样切换将永远不会未定义。