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

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

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

export const SellerPage = () => {}

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

export const SellerPage = () => {
	let params = useParams()
	const { sellerId } = params

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

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

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

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

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

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

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

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

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

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

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

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

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

अपने छात्रों वाला एप्लिकेशन खोलें। पाठ की सामग्री का अध्ययन करके, teachers फोल्डर में TeacherPage.jsx फाइल बनाएं। TeacherPage कम्पोनेंट के कोड में आवश्यक शिक्षक की ऑब्जेक्ट प्राप्त करें और इस शिक्षक के सभी छात्र प्राप्त करें। map की सहायता से उनसे एक सूची बनाएं, प्रत्येक छात्र का पूरा नाम उस छात्र के पृष्ठ का लिंक होना चाहिए।

लौटाए गए मार्कअप में शिक्षक के पूरे नाम के साथ एक शीर्षक होना चाहिए, उसके नीचे एक छोटा शीर्षक होना चाहिए - उस विषय के साथ, जो वह पढ़ाता है, और उसके नीचे उसके छात्रों की सूची होनी चाहिए।

App.jsx में शिक्षक के पृष्ठ के लिए एक और चाइल्ड रूट कनेक्ट करें।

अपना एप्लिकेशन चलाएं और सुनिश्चित करें कि सब कुछ काम कर रहा है।