What is the necessity of "export default connect" when you are connecting your react component to redux store

Question

I was trying to create some components in the same jsx file. I wants to connect one of the child component to store(feels wrong here), without connecting the HOC component to the store. Therefore when connecting the child component he does not use export default connect. It creates an error saying actions are undefined.

Example code.

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;

My question is why we always need to use connect as export default connect ?. Is there any other ways to do the connect?.

Thank you in advance.

Answer 1

connect() returns a new connected component. In fact, connect() wraps your component in a new one, adding some useful features, that is why you usually export the return value of the connect function (the new component).

In your case, you should do something like

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

With a little bit of more researching I found a cure :D.

connect always returns a function. In my given example I input Test1 as an argument to the connect function.

So we need to assign the returned function to some variable or const. In the above example the line connect(mapStateToProps,mapActionsToProps) (Test1); should change to const ConnectedComponent = connect(mapStateToProps,mapActionsToProps) (Test1);. After that I can export the component(ConnectedComponent) or reuse it within the same file.

this link help me to understand this.

Hope this answer will help others.