मैं फ्लक्स का उपयोग करने के लिए अपने ऐप को फिर से लिख रहा हूं और मेरे पास स्टोर से डेटा प्राप्त करने के साथ एक समस्या है। मेरे पास बहुत सारे घटक हैं, और वे बहुत घोंसला बनाते हैं। उनमें से कुछ बड़े हैं ( Article), कुछ छोटे और सरल ( UserAvatar, UserLink) हैं।
मैं उस घटक के साथ संघर्ष कर रहा हूं जहां मुझे स्टोर से डेटा पढ़ना चाहिए।
मैंने दो चरम दृष्टिकोणों की कोशिश की, जिनमें से कोई भी मुझे पसंद नहीं आया:
सभी इकाई घटक अपने स्वयं के डेटा को पढ़ते हैं
प्रत्येक घटक जिसे स्टोर से कुछ डेटा की आवश्यकता होती है, वह केवल एंटिटी आईडी प्राप्त करता है और अपने आप ही इकाई को पुनः प्राप्त करता है।
उदाहरण के लिए, Articleपारित किया जाता है articleId, UserAvatarऔर UserLinkपारित किया जाता है userId।
इस दृष्टिकोण में कई महत्वपूर्ण डाउनसाइड हैं (कोड नमूने के तहत चर्चा की गई)।
var Article = React.createClass({
mixins: [createStoreMixin(ArticleStore)],
propTypes: {
articleId: PropTypes.number.isRequired
},
getStateFromStores() {
return {
article: ArticleStore.get(this.props.articleId);
}
},
render() {
var article = this.state.article,
userId = article.userId;
return (
<div>
<UserLink userId={userId}>
<UserAvatar userId={userId} />
</UserLink>
<h1>{article.title}</h1>
<p>{article.text}</p>
<p>Read more by <UserLink userId={userId} />.</p>
</div>
)
}
});
var UserAvatar = React.createClass({
mixins: [createStoreMixin(UserStore)],
propTypes: {
userId: PropTypes.number.isRequired
},
getStateFromStores() {
return {
user: UserStore.get(this.props.userId);
}
},
render() {
var user = this.state.user;
return (
<img src={user.thumbnailUrl} />
)
}
});
var UserLink = React.createClass({
mixins: [createStoreMixin(UserStore)],
propTypes: {
userId: PropTypes.number.isRequired
},
getStateFromStores() {
return {
user: UserStore.get(this.props.userId);
}
},
render() {
var user = this.state.user;
return (
<Link to='user' params={{ userId: this.props.userId }}>
{this.props.children || user.name}
</Link>
)
}
});
इस दृष्टिकोण के डाउनसाइड्स:
- यह स्टोर करने के लिए संभावित रूप से 100s घटकों की निराशा होती है;
- यह जानना मुश्किल है कि डेटा कैसे और किस क्रम में अपडेट किया गया है क्योंकि प्रत्येक घटक अपने डेटा को स्वतंत्र रूप से प्राप्त करता है;
- भले ही आपके पास पहले से ही राज्य में एक इकाई हो , आप बच्चों को इसकी आईडी पास करने के लिए मजबूर होते हैं, जो इसे फिर से प्राप्त करेंगे (या संगति को तोड़ दें)।
सभी डेटा को शीर्ष स्तर पर एक बार पढ़ा जाता है और घटकों को पास कर दिया जाता है
जब मैं बग्स पर नज़र रखने से थक गया था, मैंने शीर्ष स्तर पर पुनर्प्राप्त सभी डेटा डालने की कोशिश की। यह, हालांकि, असंभव साबित हुआ क्योंकि कुछ संस्थाओं के लिए मेरे पास घोंसले के शिकार के कई स्तर हैं।
उदाहरण के लिए:
- ए
CategoryमेंUserAvatarऐसे लोग शामिल हैं जो उस श्रेणी में योगदान करते हैं; - एक
ArticleकईCategoryएस हो सकता है ।
इसलिए अगर मैं स्टोर के स्तर से सभी डेटा को पुनः प्राप्त करना चाहता था, तो मुझे निम्नलिखित की Articleआवश्यकता होगी:
- से लेख प्राप्त किया
ArticleStore; - से सभी लेख की श्रेणियों को पुनः प्राप्त करें
CategoryStore; - प्रत्येक श्रेणी के योगदानकर्ताओं को अलग से पुनर्प्राप्त करें
UserStore; - किसी तरह वह सारा डेटा कंपोनेंट्स को डाउन कर देते हैं।
इससे भी अधिक निराशा की बात यह है कि जब भी मुझे एक गहरी नेस्टेड इकाई की आवश्यकता होती है, मुझे घोंसले के प्रत्येक स्तर पर कोड जोड़ने की आवश्यकता होती है ताकि इसके अतिरिक्त इसे नीचे पारित किया जा सके।
उपसंहार
दोनों दृष्टिकोण त्रुटिपूर्ण लगते हैं। मैं इस समस्या को सबसे सुरुचिपूर्ण ढंग से कैसे हल करूं?
मेरे उद्देश्य:
स्टोर में ग्राहकों की एक पागल संख्या नहीं होनी चाहिए। यह
UserLinkसुनने के लिए प्रत्येक के लिए बेवकूफीUserStoreहै कि क्या मूल घटक पहले से ही ऐसा करते हैं।अगर मूल घटक को स्टोर से कुछ ऑब्जेक्ट (जैसे
user) प्राप्त किया गया है, तो मैं नहीं चाहता कि किसी भी नेस्टेड घटक को फिर से लाना पड़े। मैं इसे सहारा के माध्यम से पारित करने में सक्षम होना चाहिए।मुझे शीर्ष स्तर पर सभी संस्थाओं (रिश्तों सहित) को नहीं लाना चाहिए क्योंकि यह रिश्तों को जोड़ने या हटाने में कठिनाई होगी। मैं हर बार सभी घोंसले के शिकार के स्तर पर नए प्रॉप्स को पेश नहीं करना चाहता हूं, जब एक नेस्टेड इकाई को एक नया रिश्ता मिलता है (जैसे श्रेणी ए मिलती है
curator)।