Implementering af formularændringer i Redux

I denne lektion afslutter vi arbejdet med at vise oplysninger om sælgeren i formularen til tilføjelse af produkter. For at gøre dette skal vi bare ændre formularlayoutet en smule.

Lad os åbne vores produktapplikation, og i den filen NewProductForm.jsx. Lad os føje en lille kode til layoutet af dropdown-menuen, hvor vi kan vælge sælger, før return kommandoen. Vi implementerer det via standardmetoden med map:

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

Og nu laver vi ændringer i selve layoutet. For at gøre dette indsætter vi et afsnit med følgende layout i formularen mellem det første og andet afsnit (mellem layoutblokkene for produktnavn og produktbeskrivelse):

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

Nu kan vi starte vores applikation. I tilføjelsesformularen har vi nu en liste over sælgere. Lad os prøve at udfylde formularen med data, vælge en af dem og klikke på gem-knappen. Nu, hvis vi kigger i Redux DevTools, vil vi se ændringerne - i det nyligt tilføjede produkt har vi en egenskab seller med id for den valgte sælger som værdi. Også under fanen State vises to slices nu products og sellers.