Gjennomføring av endringer i skjema i Redux

På denne timen vil vi fullføre arbeidet med å vise informasjon om selger i skjemaet for å legge til produkt. For å gjøre dette trenger vi bare å endre skjemaets oppsett litt.

La oss åpne produktapplikasjonen vår, og i den filen NewProductForm.jsx. La oss før return-kommandoen legge til en liten kodebit for oppsettet av nedtrekkslisten, der vi skal velge selger. Vi implementerer den gjennom standardmetoden med map:

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

Og nå skal vi gjøre endringer i selve oppsettet. For å gjøre dette, i skjemaet mellom den første og andre avsnittet (mellom oppsettsblokkene for produktnavn og produktbeskrivelse) setter vi inn et avsnitt med følgende oppsett:

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

Nå kan vi starte applikasjonen vår. I skjemaet for tilføyelse dukket det opp en liste med selgere. La oss prøve å fylle ut skjemaet med data, velge en av dem og klikke på lagre-knappen. Nå, hvis vi ser i Redux DevTools, vil vi se endringene - i det nylig tilføyde produktet dukket det opp en egenskap seller med id-en til den valgte selgeren som verdi. Også i State-fanen vises nå to skiver products og sellers.