रिएक्ट रेडक्स कनेक्ट घटक के साथ एचओसी का उपयोग करें

Question

मैं अपनी पहली प्रतिक्रिया मूल परियोजना के बीच में हूं। मैं एक एचओसी बनाना चाहता हूं जो एपीआई से डेटा सिंक करने के साथ पूरी तरह से काम करता है। यह तब मेरे सभी अन्य घटकों को लपेट देगा।

मैं सही मेरी DataSync घटक निर्यात बयान में निम्न कार्य करके अन्य सभी घटकों में वृद्धि होगी हूँ हैं:

export default DataSync(SomeOtherComponent);

अवधारणा मैं के साथ संघर्ष कर रहा हूँ कि SomeOtherComponent भी प्रतिक्रिया Redux कनेक्ट पर निर्भर करता है अन्य Redux राज्य को पुनः प्राप्त करने के लिए विधि। मेरा सवाल यह है कि मैं दोनों एक साथ कैसे उपयोग कर सकता हूं? कुछ इस तरह?

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent));

मैं हो सकता है पूरी तरह से गलत समझा अवधारणा यहाँ तो मैं वास्तव में कुछ संकेत दिए गए

संपादित की सराहना करेंगे

आगे व्याख्या करने के लिए:

मेरे DataSync अस्थायी विशुद्ध रूप से सिंक्रनाइज़ संभाल होगा ऐप के बीच डेटा और शीर्ष स्तर घटक होगा। इसे ऑथ स्टेट तक पहुंच की आवश्यकता होगी और अन्य सभी घटकों के लिए रेडक्स (इस मामले के ऑर्डर में) डेटा सेट करेगा।

डेटासिंक एचओसी के भीतर घोंसले के घटक को पुनर्प्राप्त डेटा, मार्गों तक पहुंच की आवश्यकता होती है और वे बदले में राज्य (ऑर्डर) बनाते हैं जिन्हें सर्वर पर समय-समय पर समन्वयित किया जाना चाहिए।

Answer 1

हो सकता है यह है आप क्या चाहते थे:

DataSync.js

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

SomeOtherComponent.js

export default DataSync(connect(mapStateToProps, mapDispatchToProps)(SomeOtherComponent)); 

उपयोग connect अपने बच्चे घटकों पर भी।यहां WHY

Answer 2

हां, connect भी HOC है और HOC एक घटक लौटने के बाद से आप उन्हें मनमाने ढंग से घोंसला कर सकते हैं।

HOC(HOC(...(Component)...)) ठीक है।

---

हालांकि, मुझे लगता है कि आप की आवश्यकता हो सकती connect(...)(DataSync(YourComponent)) बजाय DataSync(connect(...)(YourComponent)) है ताकि DataSync भी state/props यदि आवश्यक हो तो यहां पहुंच सकता है। यह वास्तव में उपयोग के मामले पर निर्भर करता है।

Answer 3

यहाँ एक सरल उदाहरण यह कैसे काम करता

const AppWrapper = MainComponent => 
    class extends Component{ 
    componentWillmount(){ 
     this.props.fetchSomething() 
    } 
    componentDidUnmount(){ 
     this.props.push('/') 
    } 
    render(){ 
     return (
     <div> 
      {this.props.fetchedUsers === 'undefined' ? 
      <div> Do somethig while users are not fetched </div> : 
      <MainComponent {...this.props}/>} 
     </div> 
    ) 
    } 
    } 



const App = ({users}) => { 
    // just example, you can do whatever you want 
    return <div>{JSON.stringify(users)}</div> 
}; 

// mapStateToProps will be in HOC -> Wrapper 
// mapDispatchToProps will be in HOC -> Wrapper 

/* you may use DataSync as you want*/ 
export default connect(mapStateToProps, mapDispatchToProps)(AppWrapper(App)) 

उपयोगी HOC लिंक

आशा है कि यह तुम्हारी मदद करेगा

अद्यतन है: लिखने में कोई त्रुटि को ठीक

Answer 4

मैं उसी दृष्टिकोण का उपयोग करता हूं और जैसा कि @ उल्लेख किया गया है। यहां एकमात्र समस्या यह है कि यदि आप अपने कार्यों को मैप करते हैं तो आपके पास प्रेषण() उपलब्ध नहीं होगा।

जिस तरह से किसी को भी एक ही समस्या का सामना करना पड़ रहा है, तो मैं इसे कैसे काम करने में कामयाब रहा।

const ConnectedComponentWithActions = connect(
() => { return {}; }, 
    { myAction }, 
)(ViewComponent); 

export default connect(
    state => state, 
    null, 
)(withPreFetch(firstLoadAction, ConnectedComponentWithActions)); 

कहाँ withPreFetch(firstLoadAction, ConnectedComponentWithActions) अस्थायी एक कार्रवाई को स्वीकार करने को भेजा जा रहा है।