Quelle est la meilleure façon d'utiliser connect () de react-redux, composant Parent vs Child?

Je suis peu confus quant à la manière efficace d'utiliser connect () de la bibliothèque react-redux . J'ai le composant de coup

class SignUp extends React.Component {
    //some functions
    render(){
      return (
          //other components       
          <SignUpPageRight>
            <SignUpForm signupFunc={this.props.signupFunc} />
          </SignUpPageRight>
        </SignUpPage>
        <SignUpFooter /> //component
      </SignUpPageWrapper>
  );
 }
}
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignUp);

Dans le code ci-dessus, peu sont réactifs Component (// commentés) et les autres sont const de bibliothèque styled-component .

Pour le moment, j'ai créé SignUpForm en tant que conteneur, c'est-à-dire enveloppé dans connect ()

class SignUpForm extends React.Component {
  //lots of code here using this.props from connect()

}    
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignUpForm);

Mais j'estime que ce n'est pas la manière efficace d'utiliser connect , le mieux serait d'envelopper le composant parent SignUp code> dans connect comme ci-dessous, puis en passant les méthodes et états comme accessoires aux composants enfants.

class SignUp extends React.Component {
//some functions
render(){
  return (
      <SignUpPageWrapper>
        <SignUpPage>
          <SignUpPageLeft>
            <SignUpLeftText /> //component
          </SignUpPageLeft>
          <SignUpPageRight>
            <SignUpForm /> //component <=
          </SignUpPageRight>
        </SignUpPage>
        <SignUpFooter /> //component
      </SignUpPageWrapper>
  );
 }
}