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

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

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

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

products/ProductPage.jsxexport const ProductPage = () => {}

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

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params
}

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

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

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

products/ProductPage.jsximport { useSelector } from 'react-redux'
import { useParams } from 'react-router-dom'

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

products/ProductPage.jsxexport const ProductPage = () => {
  let params = useParams()
  const { productId } = params

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

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

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

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