मैं रेक्ट रेडक्स में बाल घटकों से कैसे प्रेषित कर सकता हूं?

Question

मेरे सर्वर इस तरह कोड है:

<ReactRedux.Provider store={store}><Layout defaultStore={JSON.stringify(store.getState())}/></ReactRedux.Provider>

<Layout> स्पष्ट रूप से अधिक घटकों जो घोंसला भी अधिक है।

import React from 'react'; 

export default React.createClass({ 
    render: function(){ 
    var classes = [ 
     'js-select-product', 
     'pseudo-link' 
    ]; 

    if (this.props.selected) { 
     classes.push('bold'); 
    } 

    return (
     <li className="js-product-selection"> 
     <span onClick={this.props.onClick} className={classes.join(' ')} data-product={this.props.id}>{this.props.name}</span> 
     </li> 
    ); 
    } 
}); 

क्या मैं सच में नहीं बल्कि this.props.onClick से क्या करना चाहते हैं set state in a reducer को एक घटना प्रेषण है:

मैं इस तरह गहरी नीचे एक वर्ग है। मैं संदर्भ के बारे में कुछ चीजें ऑनलाइन कर रहा हूं लेकिन मुझे मिश्रित समीक्षा मिली है क्योंकि यह सुविधा थी या नहीं जा रही थी।

संपादित मैं इस connect method देखना लेकिन मैं शपथ ली हो सकता था मैं बच्चों घटकों में connect उपयोग करने के लिए नहीं पढ़ा था।

Answer 1

आप बच्चों के घटकों पर भी पकड़े जा रहे हैं। आपको अपने ऐप को ढूढ़ना चाहिए ताकि आपके पास घटक और गैर-जुड़े घटक जुड़े हों। गैर-जुड़े घटक अनिवार्य रूप से स्टेटलेस, शुद्ध कार्य होना चाहिए, जो प्रोप के माध्यम से अपनी सभी आवश्यकताओं को लेते हैं। कनेक्टेड घटकों को connect फ़ंक्शन का उपयोग रेडक्स राज्य को प्रोपस और रेडक्स प्रेषक को प्रोप के लिए मैप करने के लिए करना चाहिए, और फिर उन घटकों को बाल घटकों को पारित करने के लिए जिम्मेदार होना चाहिए।

आपके पास एक ऐप में बहुत से जुड़े घटक हो सकते हैं, और बहुत सारे गैर-जुड़े घटक हो सकते हैं। This post (रेडक्स के निर्माता द्वारा) इसे अधिक विस्तार से चर्चा करता है, और यूआई के वास्तविक प्रदर्शन के लिए जिम्मेदार गैर-जुड़े (गूंगा) घटकों के बारे में बात करता है, और कनेक्टेड (स्मार्ट) घटक गैर-जुड़े घटकों को लिखने के लिए जिम्मेदार होते हैं।

एक उदाहरण (कुछ नए सिंटैक्स का उपयोग) किया जा सकता है:

class Image extends React { 
    render() { 
    return (
     <div> 
     <h1>{this.props.name}</h1> 
     <img src={this.props.src} /> 
     <button onClick={this.props.onClick}>Click me</button> 
     </div> 
    ); 
    } 
} 

class ImageList extends React { 
    render() { 
    return (
     this.props.images.map(i => <Image name={i.name} src={i.src} onClick={this.props.updateImage} />) 
    ); 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    images: state.images, 
    }; 
}; 
const mapDispatchToProps = (dispatch) => { 
    return { 
    updateImage:() => dispatch(updateImageAction()), 
    }; 
}; 
export default connect(mapStateToProps, mapDispatchToProps)(ImageList); 

इस उदाहरण में, ImageList एक जुड़ा घटक है और Image एक गैर जुड़े घटक है।

Answer 2

आपके द्वारा कनेक्ट किए गए घटकों को सीमित करने के लिए प्रभाव के लिए सलाह दी जाती थी। उदाहरण के लिए देखें:

https://github.com/reactjs/redux/issues/419

https://github.com/reactjs/redux/issues/419#issuecomment-178850728

वैसे भी, जो वास्तव में एक घटक के लिए राज्य का एक टुकड़ा सौंपने के लिए और अधिक उपयोगी है। यदि आप अपनी स्थिति के लिए समझ में आते हैं, तो आप ऐसा कर सकते हैं, या यदि आप कॉलबैक को पास नहीं करना चाहते हैं जो dispatch() पर कॉल करता है तो आप स्टोर को पास कर सकते हैं या पदानुक्रम को प्रेषित कर सकते हैं यदि आप चाहें।