ReactとRedux：複数のコンポーネントとベストプラクティスへの接続

Question

私は最初のReact/Reduxプロジェクトに取り組んでおり、少し質問があります。私はドキュメントを読んで、https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolistで入手できるチュートリアルを見ました。

しかし、私はまだ1つの質問があります。それはログインページに関するものです。

コンポーネント/ LoginForm.js

import { Component, PropTypes } from 'react' 

class LoginForm extends Component { 
    render() { 
     return (
     <div> 
      <form action="#" onSubmitLogin={(e) => this.handleSubmit(e)}> 
       <input type="text" ref={node => { this.login = node }} /> 
       <input type="password" ref={node => { this.password = node }} /> 
       <input type="submit" value="Login" /> 
      </form> 
     </div> 
    ) 
    } 

    handleSubmit(e) { 
     e.preventDefault(); 
     this.props.onSubmitLogin(this.login.value, this.password.value); 
    } 
} 

LoginForm.propTypes = { 
    onSubmitLogin: PropTypes.func.isRequired 
}; 

export default LoginForm; 

そして、私のコンポーネントにデータを渡すログインという名前のコンテナコンポーネント： は、だから私は、プレゼンテーションコンポーネントという名前のLoginFormを持っています。反応-Reduxのルータを使用して、私はこのコンテナ（とないpresentationnalコンポーネント）を呼び出す：

コンテナ/ Login.js

は

import { connect } from 'react-redux' 
import { login } from '../actions/creators/userActionCreators' 
import LoginForm from '../components/LoginForm' 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSubmitLogin: (id, pass) => dispatch(login(id, pass)) 
    } 
}; 

export default connect(null, mapDispatchToProps)(LoginForm); 

あなたが見ることができるように、私はconnectメソッドを使用しています提供します私のコンテナを作るために還元する。

私の質問には、次のいずれかです。

私は私のログインコンテナは、複数のビューを使用したい場合（例：エラーを表示するようにLoginFormとerrorList）を、私は接続せずに（手でそれを行う必要があるため、テイクを接続します1つだけの引数）。次のようなもの：

class Login extends Component { 

    render() { 
     return (
     <div> 
      <errorList /> 
      <LoginForm onSubmitLogin={ (id, pass) => dispatch(login(id, pass)) } /> 
     </div> 
    ) 
    } 

} 

悪い習慣ですか？ errorListとLoginFormの両方を使用し、LoginPageにconnectというコンテナを作成する別のプレゼンテーションコンポーネント（LoginPage）を作成する方が良いですか？

---

EDIT：私は第三プレゼンテーションコンポーネント（LoginPage）を作成する場合は、私が2倍のデータを渡す必要があります。このように：Container -> LoginPage -> LoginForm & ErrorList。 文脈であっても、行く方法ではないようです。

Answer 1

私はあなたの2番目の例では、非常に近いと思います。複数のプレゼンテーションコンポーネントを接続してレンダリングするコンテナコンポーネントを1つだけ作成できます。それは別のモジュールでだにもかかわらず

import { connect } from 'react-redux' 
import { login } from '../actions/creators/userActionCreators' 
import LoginForm from '../components/LoginForm' 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSubmitLogin: (id, pass) => dispatch(login(id, pass)) 
    } 
}; 

// `LoginForm` is being passed, so it would be the "container" 
// component in this scenario 
export default connect(null, mapDispatchToProps)(LoginForm); 

、直接あなたのLoginFormを接続しているあなたがここでやっている：あなたの最初の例で

は、実際にはない別のコンテナコンポーネントがあります。

代わりに、何を行うことができますが、このようなものです：

コンテナ/ Login.js

import { connect } from 'react-redux' 
import { login } from '../actions/creators/userActionCreators' 
import LoginForm from '../components/LoginForm' 
import ErrorList from '../components/ErrorList' 

class Login extends Component { 

    render() { 
     const { onSubmitLogin, errors } = this.props; 

     return (
     <div> 
      <ErrorList errors={errors} /> 
      <LoginForm onSubmitLogin={onSubmitLogin} /> 
     </div> 
    ) 
    } 

} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSubmitLogin: (id, pass) => dispatch(login(id, pass)) 
    } 
}; 

const mapStateToProps = (state) => { 
    return { 
     errors: state.errors 
    }; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(Login); 

Loginコンポーネントは今すぐ「コンテナ作り、connectに渡されていることに注意してくださいerrorListとLoginFormの両方をプレゼンテーションにすることができます。すべてのデータは、Loginコンテナによって小道具を介して渡すことができます。

Answer 2

プレゼンテーションコンポーネントとしてすべてのコンポーネントを構築する必要があると私は本当に信じています。コンテナコンポーネントが必要な瞬間に、既存のプレゼンテーションの1つに{connect}を使用し、コンテナコンポーネントに変換できます。

しかし、これはこれまでのところReactの短い経験を持つ私の見解です。