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

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

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

products/UserReactions.jsxconst reactionObj = {
  good: '+',
  soso: '+/-',
  bad: '-',
}

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

products/UserReactions.jsxexport const UserReactions = ({ product }) => {}

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

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

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

products/UserReactions.jsxreturn <div>{userReactions}</div>

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

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

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