रेडक्स एप्लिकेशन में अतिरिक्त लॉजिक जोड़ना

इस सत्र में हम अपने एप्लिकेशन में अंतिम घटक जोड़ेंगे। यदि विशिष्ट होना है, तो हम उत्पाद में उपयोगकर्ता की प्रतिक्रिया जोड़ेंगे, जिसने या तो इसे ऑर्डर किया है, या इसके बारे में जानकारी पढ़ी है।

चलिए अपना उत्पाद एप्लिकेशन खोलते हैं। विक्रेता के नाम के मामले में जैसे, हमें उपयोगकर्ताओं की प्रतिक्रिया को एप्लिकेशन के कई स्थानों पर दिखाने की आवश्यकता है। और इसका मतलब है कि हमें एक अलग घटक की आवश्यकता होगी। इसलिए products फोल्डर में UserReactions.jsx फाइल बनाकर शुरू करते हैं। आइए सबसे पहले इसमें एक ऑब्जेक्ट लिखते हैं, जिसमें हमारी प्रतिक्रियाएं होंगी:

const reactionObj = {
	good: '+',
	soso: '+/-',
	bad: '-',
}

और नीचे स्वयं फंक्शन लिखना शुरू करते हैं, जिसमें हम स्लाइस product पास करेंगे:

export const UserReactions = ({ product }) => {}

अब करली ब्रेसिज़ में UserReactions फंक्शन का बॉडी लिखते हैं। इसके लिए map का उपयोग करके अपने reactionObj की की-वैल्यू पेयर्स को इटरेट करेंगे, प्रत्येक के लिए बटन के लिए प्रतीक प्राप्त करेंगे ('+', '+/-' या '-') और किसी विशेष प्रतिक्रिया का संख्यात्मक मान (इसे हम product से store में प्रतिक्रिया के नाम से एक्सेस करेंगे):

const userReactions = Object.entries(reactionObj).map(([name, image]) => {
	return (
		<button key={name} type="button" className="reaction-button">
			{image} {product.reactions[name]}
		</button>
	)
})

और इसके बाद फंक्शन के कोड के अंत में userReactions बटनों के साथ मार्कअप रिटर्न करेंगे:

return <div>{userReactions}</div>

और index.css में कुछ और स्टाइल्स भी जोड़ेंगे:

.reaction-button {
	margin-right: 10px;
	margin-bottom: 10px;
}

यदि यह थोड़ा भ्रमित करने वाला लगता है, तो चिंता न करें, आगे आपको सब कुछ बहुत स्पष्ट हो जाएगा।

अपना छात्र एप्लिकेशन खोलें। आपके एप्लिकेशन में उपयोगकर्ताओं के लिए छात्रों में से समूह का मॉनिटर और खेल टीम का कप्तान चुनने की सुविधा होगी। इसलिए, पाठ की सामग्री का अध्ययन करने के बाद, students फोल्डर में UserVotes.jsx फाइल बनाएं। फाइल की शुरुआत में votesObj ऑब्जेक्ट बनाएं, जिसमें आपके पास दो गुण होंगे - leader और captain, जिनके मान GL और TC होंगे, जो बटनों के लिए प्रतीक के रूप में होंगे।

ऑब्जेक्ट को डिफाइन करने के बाद फाइल में नीचे votesObj के बाद UserVotes फंक्शन का कोड लिखें, इस पाठ की सामग्री के अनुरूप।