Εισαγωγή αλλαγών στη φόρμα στο Redux

Σε αυτό το μάθημα θα ολοκληρώσουμε την εργασία για την εμφάνιση πληροφοριών του πωλητή στη φόρμα προσθήκης προϊόντος. Για αυτό μας απομένει να αλλάξουμε ελαφρώς τη σύνταξη της φόρμας.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτή το αρχείο NewProductForm.jsx. Ας προσθέσουμε πριν από την εντολή return ένα κομμάτι κώδικα για τη σύνταξη της αναδυόμενης λίστας, στην οποία θα επιλέγουμε τον πωλητή. Θα την υλοποιήσουμε μέσω της τυπικής μεθόδου με map:

products/NewProductForm.jsxconst sellersList = sellers.map((seller) => (
  <option key={seller.id} value={seller.id}>
    {seller.name}
  </option>
))

Και τώρα ας εισάγουμε αλλαγές στην ίδια τη σύνταξη. Για αυτό, στη φόρμα μεταξύ της πρώτης και της δεύτερης παραγράφου (μεταξύ των μπλοκ σύνταξης για το όνομα και την περιγραφή του προϊόντος) θα εισάγουμε μια παράγραφο με την ακόλουθη σύνταξη:

products/NewProductForm.jsx<p>
  <label htmlFor="prodSeller">Seller:</label>
  <select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
    <option value=""></option>
    {sellersList}
  </select>
</p>

Τώρα μπορούμε να εκκινήσουμε την εφαρμογή μας. Στη φόρμα προσθήκης εμφανίστηκε μια λίστα με τους πωλητές. Ας προσπαθήσουμε να συμπληρώσουμε τη φόρμα με δεδομένα, να επιλέξουμε έναν από αυτούς και να κλικάρουμε στο κουμπί αποθήκευσης. Τώρα, αν κοιτάξουμε στα Redux DevTools, θα δούμε αλλαγές - στο νέο προστεθέν προϊόν θα εμφανιστεί η ιδιότητα seller με το id του επιλεγμένου πωλητή ως τιμή. Επίσης, στην καρτέλα State τώρα εμφανίζονται δύο τεμάχια products και sellers.