Which is preferred way to use connect() from react-redux, Parent vs Child component?

Question

I am little confuse in the efficient way to use connect() from react-redux library. I have the blow component

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

In above code, few are react Component(//commented) and rest are const from styled-component library.

As of now, I have made SignUpForm as a container, i.e wrapped into connect()

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

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

But I feel that this is not the efficient way to use connect, the better would be to wrap the parent component SignUp into connect like below, and then passing the methods and states as props to the child components.

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);

What would be the clean, efficient and good way to write this code?

Different

Personally I would connect() parent component, pass down the props and make the children stateless functional components. – Liselisetta

Answer 1

If we go by documentation, there is actually a right or wrong answer to this. Redux documentation suggests separating components into presentational and container components.

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

Your SignUpForm component is a perfect example of a container component that has the job of communicating with the redux store. Values, and dispatch handlers should be passed down through props to your presentational components. This makes your store manipulation very easy to understand because it is all contained within one component.

Now for reusability. Your container component should be higher-ordered enough so that it can contain all the presentational components that will manipulate a logical slice of your redux store, but low enough that you can reuse as much as possible. So for a form, the container should contain all the inputs, and you can separate the inputs themselves into as many presentational components as you like. This also allows you to reuse your presentational components with a different continainer component as long as you structure them with modularity in mind.

Subulate

Answer 2

There's no right or wrong answer here, it's all about interpreting the context.

Here, I think it doesn't make sense to connect the SignUp component to Redux, if the only thing it's going to do is passing the props down to the SignUpForm.

And also, let me ask you, what happens if you need to render SignUpForm component inside a different component? Well, that component should also be connected to Redux and should pass the props down as well.

I usually try to keep the store data as close as where I'm going to use it, while it still makes sense.

I hope it helps!

---

EDIT

On the other hand, if you are sure aren't going to use SignUpForm anywhere else in you application, and also you require data from the store apart from that related to the SignUpForm, I would stick with simply connecting the SignUp component.

Camembert

Thanks for giving explanations for both the scenarios. Upvoted for that. – Different

Answer 3

According to the container/presentational components design pattern, the container component should be made aware of the Redux state and actions. This is pointed out in the Redux docs

The reason behind this is, you would have more control over what components have access to your state and your data wouldn't be scattered about. So in your case, I would get state and dispatch actions inside <SignUp /> component and pass them down as props to <SignUpForm />.

Personal Thoughts: I don't think it has anything to do with the efficiency of the code, it's just way easier to maintain when your code scales

Reinhardt

I also feel the same. Thanks. – Different