Я немного запутался в эффективном способе использования connect() из реаги-редукса библиотеки.У меня есть компонент удара
class SignUp extends React.Component {
//some functions
render(){
return (
<SignUpPageWrapper>
<SignUpPage>
<SignUpPageLeft>
<SignUpLeftText /> //component
</SignUpPageLeft>
<SignUpPageRight>
<SignUpForm /> //component <=
</SignUpPageRight>
</SignUpPage>
<SignUpFooter /> //component
</SignUpPageWrapper>
);
}
}
В приведенном выше коде немногие реагируют Component (// комментируется), а остальные * const из styled-component library.
На данный момент я сделал SignUpForm контейнером, то есть обернут в connect()
class SignUpForm extends React.Component {
//lots of code here using this.props from connect()
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(SignUpForm);
Но я чувствую, что это не эффективный способ использования connect, тем лучшебыло бы обернуть родительский компонент SignUp в connect, как показано ниже, а затем передать methods и states как props дочерним компонентам.
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);
Что будетчистый, эффективный и хороший способ написать этот код?