Redux में विक्रेता पृष्ठ

बस थोड़ा सा काम बाकी है। आइए इस पाठ में आखिरी चीज करते हैं - हमारे एप्लिकेशन में प्रत्येक विक्रेता के लिए एक अलग पृष्ठ जोड़ते हैं। यहां केवल आपके लिए पहले से परिचित क्रियाएं होंगी। चलिए शुरू करते हैं।

हमारे उत्पादों वाले एप्लिकेशन को खोलते हैं, और उसमें sellers फोल्डर खोलते हैं। इस फोल्डर में SellerPage.jsx फाइल बनाते हैं। अब हम अपने कम्पोनेंट SellerPage के लिए कोड लिखना शुरू करते हैं:

sellers/SellersPage.jsxexport const SellerPage = () => {}

शुरुआत में विक्रेता की id प्राप्त करते हैं और इसके द्वारा स्लाइस में आवश्यक विक्रेता की ऑब्जेक्ट ढूंढते हैं:

sellers/SellersPage.jsxexport const SellerPage = () => {
  let params = useParams()
  const { sellerId } = params

  const seller = useSelector((state) => selectSellerById(state, sellerId))
}

इसके बाद SellerPage के कोड में विक्रेता प्राप्त करने के बाद हम सभी उत्पाद प्राप्त करते हैं, फिर उनमें से केवल वही चुनते हैं, जो इस विक्रेता द्वारा सूचीबद्ध किए गए हैं:

sellers/SellersPage.jsxconst productsOfSeller = useSelector((state) => {
  const allProducts = selectAllProducts(state)
  return allProducts.filter((product) => product.seller === sellerId)
})

और फिर चुने गए उत्पादों के नामों से map की सहायता से एक सूची बनाते हैं। और इस सूची में प्रत्येक उत्पाद का नाम उस उत्पाद के पृष्ठ पर एक लिंक होगा:

sellers/SellersPage.jsxconst productNames = productsOfSeller.map((product) => (
  <li key={product.id}>
    <Link to={`/products/${product.id}`}>{product.name}</Link>
  </li>
))

और SellerPage के कोड के अंत में मार्कअप लौटाते हैं: विक्रेता के नाम के साथ एक शीर्षक और उन उत्पादों की सूची, जो इस विक्रेता ने सूचीबद्ध किए हैं:

sellers/SellersPage.jsxreturn (
  <div>
  <h2>विक्रेता: {seller.name}</h2>

  <ul>{productNames}</ul>
  </div>
)

निस्संदेह हमें विक्रेता पृष्ठ के लिए एक रूट की भी आवश्यकता है। App.jsx फाइल खोलते हैं और इसे चाइल्ड रूट्स में अंतिम में जोड़ते हैं:

App.jsx{
  path: '/sellers/:sellerId',
  element: <SellerPage />,
},

SellersPage.jsx और App.jsx में आवश्यक हुक्स और कम्पोनेंट्स को इम्पोर्ट करना न भूलें।

हमारा एप्लिकेशन चलाते हैं, उत्पाद लोड करते हैं, और फिर बाईं ओर के मेनू में 'Sellers' लिंक पर क्लिक करते हैं। अब हम किसी भी विक्रेता के नाम पर क्लिक करके उसके पृष्ठ पर जा सकते हैं, और फिर उसके पृष्ठ पर उसके सभी उत्पाद देख सकते हैं। और, उसके किसी भी उत्पाद पर क्लिक करके, उस उत्पाद के पृष्ठ पर पहुंच सकते हैं।

इस पर अभी के लिए सब कुछ समाप्त है। हमने एप्लिकेशन बनाने के लिए Redux की मूल बातें सीखीं और यहां तक कि थोड़ा गहराई से भी। विभिन्न उपयोगी उपकरणों से परिचित हुए। आपके Redux-एप्लिकेशन बनाने में शुभकामनाएं!