Redux में विक्रेताओं की सूची

पिछले पाठों में, हमने मुख्य सामग्री के साथ काम पूरा कर लिया था। अब thunk की मदद से हम सर्वर से उत्पादों की सूची प्राप्त करते हैं और सर्वर पर एक नया उत्पाद सहेज सकते हैं। आइए विक्रेताओं के साथ काम करें। आखिरकार, हमें उनके लिए भी डेटा मिलता है। आइए विक्रेताओं की सूची के साथ एक अलग पेज बनाएं।

हमारे उत्पाद एप्लिकेशन को खोलें, और उसमें फोल्डर sellers खोलें। इस फोल्डर में फाइल SellersList.jsx बनाएं। यहाँ हम useSelector, Link और selectAllSellers का उपयोग करेंगे, जिसका कोड हम sellersSlice.js में थोड़ी देर बाद लिखेंगे:

import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { selectAllSellers } from './sellersSlice'

इसके बाद, SellersList खुद बनाएं। इसमें हम हुक useSelector की मदद से सभी विक्रेताओं को प्राप्त करेंगे, फर map लूप में विक्रेताओं की सूची के लिए मार्कअप प्राप्त करेंगे, और प्रत्येक विक्रेता का नाम उसके पेज पर लिंक करेगा। और अंत में शीर्षक और प्राप्त सूची के साथ मार्कअप वापस करेंगे:

export const SellersList = () => {
	const sellers = useSelector(selectAllSellers)
	const sellersToRender = sellers.map((seller) => (
		<li key={seller.id}>
			<Link to={`/sellers/${seller.id}`}>{seller.name}</Link>
		</li>
	))

	return (
		<div>
			<h2>Sellers:</h2>

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

इसके बाद, फाइल sellersSlice.js में जाएं और productsSlice.js में सेलेक्टर्स के अनुरूप फाइल के सबसे अंत में रिड्यूसर के निर्यात के बाद दो सेलेक्टर बनाएं:

export const selectAllSellers = (state) => state.sellers

export const selectSellerById = (state, sellerId) =>
state.sellers.find((seller) => seller.id === sellerId)

अब हमें सूची पेज के लिए रूट को कॉन्फ़िगर करना होगा, इसके लिए फाइल App.jsx खोलें और चाइल्ड रूट्स के ऐरे children में एक और ऑब्जेक्ट जोड़ें (कम्पोनेंट SellersList को इम्पोर्ट करना न भूलें):

{
	path: '/sellers',
	element: <SellersList />,
},

मेनू में हमारा लिंक 'Sellers' काम करने के लिए, चलिए फाइल root.jsx में जाएं (बहुत समय हो गया है ... ) और टैग a को एलिमेंट NavLink से बदल दें:

<NavLink to="/sellers" end>
	Sellers
</NavLink>

और अंतिम। ताकि हमारे मेनू में एक्टिव लिंक हाइलाइट हो, और यह स्पष्ट हो कि हम किस पेज पर हैं, हम index.css में स्टाइल जोड़ेंगे:

nav a.active {
	color: purple;
}

हमारा एप्लिकेशन चलाएं। अब हम मेनू में 'Sellers' पर क्लिक करके विक्रेताओं के पेज पर जा सकते हैं। बेशक, इससे पहले मेनू में 'Products' पर क्लिक करना होगा, नहीं तो हमारे उत्पाद लोड नहीं होंगे। अगले पाठ में, हम प्रत्येक विक्रेता के लिए एक पेज बनाएंगे और Redux पर इस ट्यूटोरियल का अध्ययन पूरा करेंगे।

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

कम्पोनेंट TeachersList के लिए कोड लिखें, इसमें सभी शिक्षकों को प्राप्त करें और शिक्षकों की सूची teachersToRender बनाएं, इस सूची की प्रत्येक पंक्ति में उनके अंतिम नाम और आद्याक्षर दिखाई दें, और कोष्ठक में वह विषय जो वे पढ़ाते हैं। प्रत्येक पूरा नाम (फुल नेम) एक लिंक हो, जो प्रत्येक शिक्षक के लिए अलग पेज पर ले जाए। फिर कम्पोनेंट के कोड के अंत में शीर्षक और बनाई गई सूची के साथ मार्कअप वापस करें।

फाइल teachersSlice.js के अंत में सेलेक्टर फंक्शन्स selectAllTeachers और selectTeacherById की एक जोड़ी बनाएं, जैसा कि पाठ में दिखाया गया है।

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

फाइल root.jsx में मेनू में 'Teachers' के लिए टैग a को NavLink से बदल दें, जैसा कि दिखाया गया है पाठ में। सुनिश्चित करें कि सक्रिय लिंक मेनू में किसी तरह हाइलाइट हो, इसके लिए index.css में स्टाइल्स जोड़कर।