title: React & Redux : connect() to multiple components & best practices
body: <p>I'm working on my first React/Redux project and I have a little question. I've read the documentation and watched the tutorials available at <a href="https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist">https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist</a>.</p>
  
  <p>But I still have one question. It's about a login page.
  So I have a presentational component named LoginForm :</p>
  
  <p><strong>components/LoginForm.js</strong></p>
  
  <pre><code>import { Component, PropTypes } from 'react'
  
  class LoginForm extends Component {
     render () {
        return (
           &lt;div&gt;
              &lt;form action="#" onSubmitLogin={(e) =&gt; this.handleSubmit(e)}&gt;
                 &lt;input type="text" ref={node =&gt; { this.login = node }} /&gt;
                 &lt;input type="password" ref={node =&gt; { this.password = node }} /&gt;
                 &lt;input type="submit" value="Login" /&gt;
              &lt;/form&gt;
           &lt;/div&gt;
        )
     }
  
     handleSubmit(e) {
        e.preventDefault();
        this.props.onSubmitLogin(this.login.value, this.password.value);
     }
  }
  
  LoginForm.propTypes = {
     onSubmitLogin: PropTypes.func.isRequired
  };
  
  export default LoginForm;
  </code></pre>
  
  <p>And a container component named Login which pass data to my component. Using react-redux-router, I call this container (and not the presentationnal component) :</p>
  
  <p><strong>containers/Login.js</strong></p>
  
  <pre><code>import { connect } from 'react-redux'
  import { login } from '../actions/creators/userActionCreators'
  import LoginForm from '../components/LoginForm'
  
  const mapDispatchToProps = (dispatch) =&gt; {
     return {
        onSubmitLogin: (id, pass) =&gt; dispatch(login(id, pass))
     }
  };
  
  export default connect(null, mapDispatchToProps)(LoginForm);
  </code></pre>
  
  <p>As you can see, I'm using the <code>connect</code> method provide by redux to create my container.</p>
  
  <p>My question is the following one :</p>
  
  <p>If I want my Login container to use multiple views (for example : LoginForm and errorList to display errors), I need to do it by hand (without connect because connect take only one argument). Something like :</p>
  
  <pre><code>class Login extends Component {
  
     render() {
        return (
           &lt;div&gt;
              &lt;errorList /&gt;
              &lt;LoginForm onSubmitLogin={ (id, pass) =&gt; dispatch(login(id, pass)) } /&gt;
           &lt;/div&gt;
        )
     }
  
  }
  </code></pre>
  
  <p>Is it a bad practice ? Is it better to create another presentational component (LoginPage) which use both errorList and LoginForm and create a container (Login) which <code>connect</code> to LoginPage ?</p>
  
  <hr>
  
  <p><strong>EDIT:</strong> If I create a third presentational component (LoginPage), I'll have to pass data twice. Like this : <code>Container -&gt; LoginPage -&gt; LoginForm &amp; ErrorList</code>.
  Even with context, it don't seems to be the way to go.</p>