Redux में स्लाइस डेटा का पुन: उपयोग
पिछले पाठ में हमने उत्पाद जोड़ने के लिए फॉर्म में विक्रेता चुनने के लिए एक ड्रॉपडाउन सूची के साथ एक और फ़ील्ड जोड़ा था जो इसे सूचीबद्ध करता है। मान लीजिए, अब हमें इस जानकारी को एप्लिकेशन में कई अन्य स्थानों पर भी प्रदर्शित करना है। इसके लिए हम हर बार कोड की नकल नहीं करेंगे, बल्कि बस एक अलग घटक बनाएंगे, जिसमें हम स्लाइस से डेटा निकालेंगे और उसे एप्लिकेशन के उन हिस्सों में प्रदर्शित करेंगे जहाँ हमें आवश्यकता है।
आइए हमारा उत्पादों वाला एप्लिकेशन खोलें।
अब products फ़ोल्डर में आइए
एक और फ़ाइल SellerOfProd.jsx बनाएं। शुरुआत के लिए
हुक useSelector इम्पोर्ट करें, जिसकी मदद
से हम आवश्यक उत्पाद वाला स्लाइस
प्राप्त करेंगे:
import { useSelector } from 'react-redux'
फिर store से आवश्यक उत्पाद निकालें विक्रेता की id के आधार पर, जिसे हम अपने नए घटक को props में पास करेंगे:
export const SellerOfProd = ({ sellerId }) => {
const seller = useSelector((state) =>
state.sellers.find((seller) => seller.id === sellerId)
)
}
और इस मामले में, यदि ऐसा विक्रेता है,
तो हम उसका नाम वापस करेंगे,
और यदि नहीं है, तो 'unknown' वापस करेंगे:
return <span>by {seller ? seller.name : 'unknown'}</span>
अब आइए हमारे नए घटक को
ProductsList.jsx में इम्पोर्ट करें और
ProductsList फ़ंक्शन में उत्पाद के नाम वाले
शीर्षक के ठीक बाद इसे डालें। जैसा कि आप देख रहे हैं,
हमने इसे props में id पास की है:
<SellerOfProd sellerId={product.seller} />
अब, यदि हम अपना एप्लिकेशन चलाते हैं,
एक नया उत्पाद जोड़ते हैं और सूची में इसे ढूंढते हैं,
तो हम देखेंगे कि इसका एक विक्रेता दिखाई दिया है,
और एप्लिकेशन लॉन्च होने पर स्वचालित रूप से जोड़े गए उत्पादों में
'unknown' दिखेगा।
एक छोटी सी टिप्पणी: यदि आपके VS Code एडिटर में eslint
sellerId पर एरर दिखाता है,
लेकिन एप्लिकेशन काम कर रहा है, तो आप
अभी के लिए इसे नज़रअंदाज कर सकते हैं या अपने एप्लिकेशन की
.eslintrc.cjs फ़ाइल खोलें और
rules में "react/prop-types": "off" जोड़ सकते हैं।
स्वतः स्पष्ट है कि हम विक्रेता की जानकारी
उत्पाद पेज पर भी जोड़ना चाहेंगे।
इसके लिए ProductPage की वर्स्टिंग में
उत्पाद के नाम वाले शीर्षक के बाद फिर से यही लाइन डालें और
जांचें कि सब काम कर रहा है:
<SellerOfProd sellerId={product.seller} />
अपना छात्रों वाला एप्लिकेशन खोलें।
पाठ की सामग्री का अध्ययन करके, students फ़ोल्डर में
TeacherForStudent घटक के लिए एक फ़ाइल बनाएं।
परिणामस्वरूप घटक को शिक्षक का पूरा नाम (फ़िओ)
वापस करना चाहिए, और उसके बाद कोष्ठक में
वह विषय जो वह पढ़ाते हैं। आवश्यक
शिक्षक को हुक useSelector की सहायता से ढूंढें।
यदि इस छात्र के लिए शिक्षक अनुपस्थित है, तो 'anonym' प्रदर्शित करें।
पिछले कार्य से प्राप्त घटक की सहायता से छात्रों की सूची वाले पेज पर प्रत्येक छात्र के लिए शिक्षक का डेटा प्रदर्शित करें।
पिछले कार्य के समान ही करें, लेकिन अलग-अलग छात्र पेज के लिए।
