Redux में कंपोनेंट में store से डेटा प्राप्त करना

इस सत्र में हम React कंपोनेंट में store से डेटा प्रदर्शित करेंगे।

हमारे उत्पादों वाले एप्लिकेशन को खोलें, फोल्डर parts/products में जाएं और इसमें एक फाइल ProductsList.jsx बनाएं। सबसे पहले इसमें हुक useSelector इम्पोर्ट करें, जिसकी सहायता से हम store से डेटा प्राप्त करेंगे:

import { useSelector } from 'react-redux'

अब store से उत्पाद प्राप्त करते हैं। फंक्शन-सिलेक्टर हम अलग से नहीं बनाएंगे, इसका कोड सीधे useSelector के पैरामीटर में लिखेंगे:

export const ProductsList = () => {
	const products = useSelector((state) => state.products)
}

फिर हम उत्पादों को फंक्शन ProductsList के बॉडी में उत्पादों को प्राप्त करने वाली लाइन के बाद मानक तरीके से प्रदर्शित करेंगे, map का उपयोग करके:

const dispProducts = products.map((product) => (
	<div key={product.id}>
		<h3>{product.name}</h3>
		<p>{product.desc.substring(0, 100)}</p>
		<p>Price: {product.price}</p>
		<p>Amount: {product.amount}</p>
	</div>
))

और नीचे dispProducts को निम्नलिखित मार्कअप में प्रदर्शित करेंगे:

return (
	<div>
		<h2>Products</h2>
		{dispProducts}
	</div>
)

अब हमारे उत्पादों की सूची को मुख्य पेज पर प्रदर्शित करना बाकी है। फाइल root.jsx खोलें और हैडिंग को बदलें:

<h2>This is my first Redux app!</h2>

निम्नलिखित में:

<h2>My Products App</h2>

फिर फाइल में कंपोनेंट ProductsList को इम्पोर्ट करें:

import { ProductsList } from '../parts/products/ProductsList'

और इसे आईडी main-page वाले डिव में बंद होने वाले टैग hr के ठीक बाद डालें:

<ProductsList />

हमारा एप्लिकेशन चलाएं। हमारी दो उत्पादों की सूची मुख्य पेज पर सफलतापूर्वक प्रदर्शित हो गई।

अपने छात्रों वाला एप्लिकेशन खोलें। फोल्डर students में फाइल StudentsList.jsx बनाएं।

पाठ में बताए अनुसार हुक useSelector की सहायता से store से छात्रों की जानकारी प्राप्त करें। स्टेट से छात्रों के सभी फील्ड्स की जानकारी प्रदर्शित करें, map का उपयोग करके।

प्राप्त कंपोनेंट StudentsList को root.jsx में इम्पोर्ट करें और इसे मुख्य पेज पर प्रदर्शित करें। सुनिश्चित करें कि छात्रों की सारी जानकारी स्क्रीन पर प्रदर्शित हुई है।