Provádění změn ve formuláři v Reduxu

V této lekci dokončíme práci na zobrazení informací o prodejci ve formuláři pro přidání produktu. K tomu nám zbývá trochu upravit vzhled formuláře.

Otevřeme naši aplikaci s produkty, a v ní soubor NewProductForm.jsx. Pojďme před příkaz return přidat kousek kódu pro vzhled rozbalovacího seznamu, ve kterém budeme vybírat prodejce. Realizujme jej prostřednictvím standardního způsobu s map:

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

A nyní provedeme změny ve vlastním vzhledu. K tomu ve formuláři mezi prvním a druhým odstavcem (mezi bloky vzhledu pro název a popis produktu) vložíme odstavec s následujícím vzhledem:

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

Nyní můžeme spustit naši aplikaci. Ve formuláři pro přidání se nám objevil seznam s prodejci. Zkusme vyplnit formulář údaji, vybrat jednoho z nich a kliknout na tlačítko uložení. Nyní, pokud nahlédneme do Redux DevTools, uvidíme změny - v nově přidaném produktu se nám objevila vlastnost seller s id vybraného prodejce jako hodnotou. Také na kartě State se nyní zobrazují dva slicy products a sellers.