Redux में विक्रेता की जानकारी जोड़ना

हमने आपसे बात की थी कि हमारे उत्पाद वास्तव में विक्रेताओं द्वारा एप्लिकेशन में जोड़े जाते हैं। आइए नया उत्पाद जोड़ते समय विक्रेता की जानकारी दिखाएं।

आइए उत्पादों वाला हमारा एप्लिकेशन खोलें, और उसमें productsSlice.js फ़ाइल खोलें। आइए prepare में एक और पैरामीटर पास करें, इसे sellerId नाम दें और इसे एक्शन के payload के लिए सेट करें। अब हमारा prepare के लिए कोड का वह हिस्सा इस तरह होगा:

products/productsSlice.jsprepare(name, desc, price, amount, sellerId) {
  return {
    payload: {
      id: nanoid(),
      name,
      desc,
      price,
      amount,
      seller: sellerId,
    },
  }
},

अब हमें उत्पाद जोड़ने के फॉर्म वाली फ़ाइल NewProductForm.jsx में कई बदलाव करने की जरूरत है। सबसे पहले विक्रेता की id के लिए एक और लोकल स्टेट जोड़ें:

products/NewProductForm.jsxconst [sellerId, setSellerId] = useState('')

फिर useDispatch के लिए dispatch वेरिएबल डिक्लेयर करने के बाद, useSelector हुक का उपयोग करके स्टेट से विक्रेताओं का स्लाइस प्राप्त करने के लिए कोड जोड़ें:

products/NewProductForm.jsxconst sellers = useSelector((state) => state.sellers)

इनपुट फ़ील्ड के हैंडलर में हम एक और जोड़ेंगे:

products/NewProductForm.jsxconst onSellerChanged = (e) => setSellerId(e.target.value)

onSaveProductClick को ठीक करें, productAdded एक्शन के लिए sellerId भी जोड़कर:

products/NewProductForm.jsxdispatch(productAdded(name, desc, price, amount, sellerId))