将react组件连接到redux store时,"export default connect"的必要性是什么

Question

我试图在同一个jsx文件中创建一些组件.我想将一个子组件连接到存储(这里感觉不对),而不将HOC组件连接到商店.因此,在连接子组件时,他不使用export default connect.它会创建一个错误,指出操作未定义.

示例代码.

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作为导出默认连接？还有其他方法可以进行连接吗？

先感谢您.

Answer 1

connect()返回一个新的连接组件.事实上,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;

Answer 2

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

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

因此，我们需要将返回的函数分配给某些变量或const。在上面的示例中，行connect（mapStateToProps，mapActionsToProps）（Test1）; 应该更改为 const ConnectedComponent = connect（mapStateToProps，mapActionsToProps）（Test1）; 。之后，我可以导出组件（ConnectedComponent）或在同一文件中重复使用它。

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

希望这个答案对别人有帮助。