আমি আমার অ্যাপ্লিকেশনটিকে ফ্লাক্স ব্যবহার করতে আবার লিখছি এবং স্টোরগুলি থেকে ডেটা পুনরুদ্ধারে আমার একটি সমস্যা রয়েছে। আমার অনেকগুলি উপাদান রয়েছে এবং তারা অনেকগুলি বাসা বেঁধে রাখে। এর মধ্যে কয়েকটি বড় ( 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 উপাদানগুলি সম্ভাব্যভাবে স্টোরগুলিতে সাবস্ক্রাইব করা হতাশাজনক;
- এটা কিভাবে তথ্য আপডেট করা হয় এবং কি আদেশের ট্র্যাক রাখা কঠিন কারণ প্রতিটি উপাদানের তার ডেটা স্বাধীনভাবে আহরণ;
- যদিও আপনার ইতিমধ্যে রাজ্যে কোনও সত্ত্বা থাকতে পারে , আপনি বাচ্চাদের কাছে এটির আইডি পাস করতে বাধ্য হন, যারা এটি পুনরুদ্ধার করবে (বা অন্যথায় ধারাবাহিকতা ভঙ্গ করবে)।
সমস্ত ডেটা একবার শীর্ষ স্তরে পড়ে এবং উপাদানগুলিতে চলে যায় passed
আমি যখন ত্রুটিগুলি খুঁজে বের করতে ক্লান্ত হয়ে পড়েছিলাম তখন আমি সমস্ত ডেটা পুনরুদ্ধার করে শীর্ষ স্তরে রাখার চেষ্টা করেছি। এটি অবশ্য অসম্ভব বলে প্রমাণিত হয়েছে কারণ কিছু সংস্থার কাছে আমার বেশ কয়েকটি স্তরের বাসা বাঁধে।
উদাহরণ স্বরূপ:
- এ-
Categoryতে এমনUserAvatarলোক রয়েছে যাঁরা এই বিভাগে অবদান রাখেন; - একটি
Articleবিভিন্নCategoryএস থাকতে পারে ।
অতএব যদি আমি স্টোর থেকে সমস্ত স্তরের একটি স্তরের পুনরুদ্ধার করতে চাই Article, তবে আমার প্রয়োজন হবে:
- থেকে নিবন্ধ পুনরুদ্ধার
ArticleStore; - থেকে সমস্ত নিবন্ধের বিভাগগুলি পুনরুদ্ধার করুন
CategoryStore; - পৃথকভাবে প্রতিটি বিভাগের অবদানকারীদের থেকে পুনরুদ্ধার করুন
UserStore; - কোনওভাবে সেই সমস্ত ডেটা উপাদানগুলিতে ফেলুন।
আরও হতাশাজনকভাবে, যখনই আমার গভীরভাবে নেস্টেড সত্তার প্রয়োজন হয়, আমি এটিকে অতিরিক্তভাবে পাস করার জন্য প্রতিটি স্তরের বাসা বাঁধতে কোড যুক্ত করতে হবে।
সাতরে যাও
উভয় পন্থা ত্রুটিযুক্ত বলে মনে হচ্ছে। আমি কীভাবে এই সমস্যাটি সবচেয়ে মার্জিতভাবে সমাধান করব?
আমার উদ্দেশ্য:
স্টোরগুলিতে গ্রাহকগণের উন্মাদ সংখ্যা থাকা উচিত নয়। পিতা-মাতার উপাদানগুলি ইতিমধ্যে এটি
UserLinkকরেUserStoreকিনা তা শুনতে প্রত্যেকের বোকামি ।যদি প্যারেন্ট উপাদানগুলি স্টোর (উদাঃ
user) থেকে কিছু বস্তু পুনরুদ্ধার করে থাকে তবে আমি চাই না যে কোনও নেস্টেড উপাদান আবার এনে আনতে হবে। আমার এটিকে প্রপসের মাধ্যমে পাস করতে সক্ষম হওয়া উচিত।শীর্ষ স্তরের সমস্ত সত্ত্বা (সম্পর্ক সহ) আনতে হবে না কারণ এটি সম্পর্ক যুক্ত করা বা অপসারণকে জটিল করে তুলবে। নেস্টেড সত্তা যখনই নতুন সম্পর্ক অর্জন করে তখন আমি সমস্ত নেস্টিং স্তরে নতুন প্রপস চালু করতে চাই না (যেমন বিভাগটি পায়
curator)।