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

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

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

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

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

sellers/SellersList.jsxexport 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 में सेलेक्टर्स के अनुरूप फाइल के सबसे अंत में रिड्यूसर के निर्यात के बाद दो सेलेक्टर बनाएं:

sellers/sellersSlice.jsexport const selectAllSellers = (state) => state.sellers

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

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

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

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

app/root.jsx<NavLink to="/sellers" end>
  Sellers
</NavLink>

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

index.cssnav a.active {
  color: purple;
}

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