Redux में उत्पाद पृष्ठ

इस पाठ में, हम किसी विशिष्ट उत्पाद की जानकारी प्रदर्शित करने के लिए एक अलग पृष्ठ बनाएंगे।

हमारे उत्पाद एप्लिकेशन को खोलें और products फोल्डर में ProductPage.jsx फ़ाइल बनाएं। जैसा कि आपको याद है, हमारे प्रत्येक उत्पाद का एक अद्वितीय id होता है। इस id के कारण हम प्रत्येक उत्पाद के लिए एक अद्वितीय URL पेज जेनरेट कर सकते हैं। पारंपरिक रूप से यह इस तरह दिखेगा: /products/id123। और id इसके डायनामिक भाग में शामिल होगा (हम रूट का खुद थोड़ी देर बाद ध्यान रखेंगे)।

तो, चलिए ProductPage.jsx में एक खाली कंपोनेंट ProductPage बनाते हैं:

export const ProductPage = () => {}

पहली चीज जो हम यहाँ करेंगे - हम हुक useParams का उपयोग करेंगे, ताकि उत्पाद पेज के लिए URL का डायनामिक भाग निकाल सकें, जिस पर हम हैं:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params
}

इसके बाद प्राप्त id के अनुसार हम store में products स्लाइस में आवश्यक उत्पाद ढूंढेंगे, हमारे द्वारा पहले से जाने जाने वाले हुक useSelector का उपयोग करके:

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

फाइल में दोनों हुक्स को इम्पोर्ट करना न भूलें:

import { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

यदि हमें आवश्यक उत्पाद नहीं मिलता है (उदाहरण के लिए, उपयोगकर्ता ने गलत पता दर्ज किया), तो हम इसके बारे में जानकारी स्क्रीन पर प्रदर्शित करेंगे। इस चरण पर कंपोनेंट ProductPage के लिए कोड इस तरह दिखना चाहिए:

export const ProductPage = () => {
	let params = useParams()
	const { productId } = params

	const product = useSelector((state) =>
		state.products.find((product) => product.id === productId)
	)

	if (!product) {
		return <p>ऐसा कोई उत्पाद नहीं है</p>
	}
}

और हमें केवल प्राप्त उत्पाद डेटा को लेआउट में प्रदर्शित करना बाकी है:

return (
	<div>
		<h2>{product.name}</h2>
		<p>विवरण: {product.desc}</p>
		<p>मूल्य: {product.price}</p>
		<p>मात्रा: {product.amount}</p>
	</div>
)

अपने छात्रों वाला एप्लिकेशन खोलें। students फोल्डर में एक फाइल बनाएं StudentPage.jsx, जिसमें आप चयनित छात्र की जानकारी प्राप्त करेंगे और प्रदर्शित करेंगे।

react-redux हुक useSelector की सहायता से छात्र के बारे में आवश्यक जानकारी प्राप्त करें, जैसा कि पाठ में दिखाया गया है।

कंपोनेंट में प्राप्त जानकारी को स्क्रीन पर प्रदर्शित करें।