将反应组件连接到 redux 商店时，“导出默认连接”的必要性是什么答案

【问题标题】：What is the necessity of "export default connect" when you are connecting your react component to redux store将反应组件连接到 redux 商店时，“导出默认连接”的必要性是什么
【发布时间】：2017-09-18 10:14:39
【问题描述】：

我试图在同一个 jsx 文件中创建一些组件。我想将其中一个子组件连接到存储（这里感觉不对），而不将 HOC 组件连接到存储。因此在连接子组件时，他不使用export default connect。它会产生一个错误，提示 actions 未定义。

示例代码。

class Test1 extends React.Component {
   constructor(props) {
   ****
   } 
   render(){
   ****
   }
}
function mapActionsToProps(dispatch) {
   return {
       actions: {
          testAction: bindActionCreators(testActionFromActions, dispatch)
       }
   }
connect(mapStateToProps,mapActionsToProps) (Test1);

class Test2 extends React.Component {
   constructor(props){
   ***
   }
   render(){
      return (<Test1/>);
   }
}

export default Test2;

我的问题是为什么我们总是需要使用 connect 作为 export default connect ？还有其他方法可以连接吗？。

提前谢谢你。

【问题讨论】：

connect 顾名思义，将您的组件与您的 Redux 存储连接起来。如果没有 redux 的 connect 方法，您将无法连接/交互您的组件。希望这会有所帮助。
谢谢。阿德尔·伊姆兰。是的。
连接并不总是必须是导出默认连接。您也可以使用命名导出。

标签： reactjs redux react-redux

【解决方案1】：

connect() 返回一个新的连接组件。实际上，connect() 将您的组件包装在一个新组件中，添加了一些有用的功能，这就是您通常导出连接函数（新组件）的返回值的原因。

在你的情况下，你应该做类似的事情

class Test1 extends React.Component {
   constructor(props) {
   ****
   } 
   render(){
   ****
   }
}
function mapActionsToProps(dispatch) {
   return {
       actions: {
          testAction: bindActionCreators(testActionFromActions, dispatch)
       }
   }
const ConnectedTest1 = connect(mapStateToProps,mapActionsToProps) (Test1);

class Test2 extends React.Component {
   constructor(props){
   ***
   }
   render(){
      return (<ConnectedTest1/>);
   }
}

export default Test2;

【讨论】：

感谢布伦丹想通了。再次感谢。
也就是说它会让组件拥有props和action。映射它们
const ConnectedTest1 如果我没记错的话应该包括 mapDispatchToProps 而不是 mapActionsToProps :)
感谢这对我有帮助！顺便说一句，我这样做了 :: export { ConnectedTest1 as Test1 } 没有使用其他组件:)

【解决方案2】：

通过更多研究，我找到了治愈方法：D。

connect 总是返回一个函数。在我给定的示例中，我输入 Test1 作为连接函数的参数。

所以我们需要将返回的函数分配给一些variable或const。在上面的示例中，行 connect(mapStateToProps,mapActionsToProps) (Test1); 应更改为 const ConnectedComponent = connect(mapStateToProps,mapActionsToProps) (Test1);。之后我可以导出组件（ConnectedComponent）或在同一个文件中重用它。

this 链接帮助我理解这一点。

希望这个答案对其他人有所帮助。

【讨论】：

可以使用下面的代码导出。 const ConnectedComponent = connect(mapStateToProps,mapActionsToProps) (Test1);export {ConnectedComponent as Test1}