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

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

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

parts/products/ProductsList.jsximport { useSelector } from 'react-redux'

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

parts/products/ProductsList.jsxexport const ProductsList = () => {
  const products = useSelector((state) => state.products)
}

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

parts/products/ProductsList.jsxconst 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 को निम्नलिखित मार्कअप में प्रदर्शित करेंगे:

parts/products/ProductsList.jsxreturn (
  <div>
    <h2>Products</h2>
    {dispProducts}
  </div>
)

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

app/root.jsx<h2>This is my first Redux app!</h2>

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

app/root.jsx<h2>My Products App</h2>

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

app/root.jsximport { ProductsList } from '../parts/products/ProductsList'

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

app/root.jsx<ProductsList />

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