reactjs - 从react-redux、父组件和子组件中使用 connect() 的首选方式是什么？

Question

我对使用 react-redux 库中的 connect() 的有效方式有点困惑。我有吹气组件

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

在上面的代码中，很少有react Component(//注释)，其余的是来自styled-component库的const。

到目前为止，我已将 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);

编写这段代码的干净、高效且好的方法是什么？

Answer 1

如果我们查看文档，就会发现这个问题实际上有正确或错误的答案。 Redux 文档建议将组件分为展示组件和容器组件。

React bindings for Redux separate presentational components from container components. This approach can make your app easier to understand and allow you to more easily reuse components. Redux Documentation

您的 SignUpForm 组件是容器组件的完美示例，它负责与 redux 存储进行通信。值和调度处理程序应该通过 props 传递到您的展示组件。这使得您的存储操作非常容易理解，因为它全部包含在一个组件中。

现在为了可重用性。您的容器组件应该足够高阶，以便它可以包含将操作 redux 存储的逻辑切片的所有表示组件，但又足够低，以便您可以尽可能地重用。因此，对于表单来说，容器应该包含所有输入，并且您可以将输入本身分成任意数量的表示组件。这还允许您将演示组件与不同的容器组件重用，只要您在构建它们时考虑到模块化即可。