Προσθήκη πληροφοριών πωλητή στο 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('')

Στη συνέχεια, μετά τη δήλωση της μεταβλητής dispatch για το useDispatch, ας προσθέσουμε κώδικα για τη λήψη της τομής των πωλητών από την κατάσταση χρησιμοποιώντας το hook 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))