Vykonávanie zmien vo formulári v Reduxe

V tejto lekcii dokončíme prácu na zobrazovaní informácií o predajcovi vo formulári na pridanie produktu. Na to nám ostáva len mierne upraviť vzhľad formulára.

Otvorme našu aplikáciu s produktmi, a v nej súbor NewProductForm.jsx. Pridajme pred príkaz return kúsok kódu pre vzhľad rozbaľovacieho zoznamu, v ktorom budeme vyberať predajcu. Realizujme ho pomocou štandardného spôsobu s map:

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

A teraz vykonajme zmeny v samotnom vzhľade. Na to vo formulári medzi prvým a druhým odsekom (medzi blokmi vzhľadu pre názov a popis produktu) vložme odsek s nasledujúcim vzhľadom:

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

Teraz môžeme spustiť našu aplikáciu. Vo formulári na pridanie sa nám objavil zoznam s predajcami. Skúsme vyplniť formulár údajmi, vybrať jedného z nich a kliknúť na tlačidlo uloženia. Teraz, ak sa pozrieme do Redux DevTools, uvidíme zmeny - v novom pridanom produkte sa nám objavila vlastnosť seller s id vybraného predajcu ako hodnotou. Tiež na karte State sa teraz zobrazujú dva slice products a sellers.