प्रतिक्रिया और Redux: एकाधिक घटकों और सर्वोत्तम प्रथाओं से कनेक्ट() कनेक्ट करें

Question

मैं अपने पहले प्रतिक्रिया/रेडक्स प्रोजेक्ट पर काम कर रहा हूं और मेरे पास एक छोटा सा सवाल है। मैंने प्रलेखन पढ़ा है और https://egghead.io/lessons/javascript-redux-generating-containers-with-connect-from-react-redux-visibletodolist पर उपलब्ध ट्यूटोरियल देखे हैं।

लेकिन मेरे पास अभी भी एक प्रश्न है। यह एक लॉगिन पेज के बारे में है।

घटकों/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 है।

कंटेनर/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 विधि प्रदान कर सकते हैं के रूप में: प्रतिक्रिया-redux रूटर का उपयोग करना, मैं इस कंटेनर (और नहीं presentationnal घटक) कहते हैं मेरे कंटेनर बनाने के लिए redux द्वारा।

मेरा प्रश्न है के बाद एक:

अगर मैं चाहता हूँ मेरी लॉग इन (उदाहरण के लिए: त्रुटियों को प्रदर्शित करने के LoginForm और errorList) ऐसे कई दृश्य का उपयोग करने के कंटेनर, मैं हाथ से करने की जरूरत है (बिना क्योंकि कनेक्ट कनेक्ट ले केवल एक तर्क)। की तरह कुछ:

class Login extends Component { 

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

} 

यह एक बुरा व्यवहार है? क्या यह एक और प्रस्तुति घटक (लॉगिनपेज) बनाना बेहतर है जो त्रुटिसूची और लॉगिनफॉर्म दोनों का उपयोग करता है और एक कंटेनर (लॉगिन) बनाता है जो connect लॉगिन पेज पर है?

---

संपादित करें: अगर मैं एक तिहाई प्रस्तुतिकरण घटक (LoginPage) बनाने के लिए, मैं डेटा दो बार पारित करने के लिए होगा। इस तरह: Container -> LoginPage -> LoginForm & ErrorList। संदर्भ के साथ भी, यह जाने का तरीका प्रतीत नहीं होता है।

Answer 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

मुझे सच में विश्वास है कि आपको अपने सभी घटकों को प्रेजेंटेशनल घटक के रूप में बनाने की आवश्यकता है। फिलहाल आपको एक कंटेनर घटक की आवश्यकता है, तो आप मौजूदा प्रस्तुति में से किसी एक पर {कनेक्ट} का उपयोग कर सकते हैं और एक कंटेनर में परिवर्तित कर सकते हैं।

लेकिन, यह अभी तक प्रतिक्रिया में संक्षिप्त अनुभव के साथ मेरा विचार है।