Wprowadzanie zmian w formularzu w Redux

Na tym zajęciu zakończymy pracę nad wyświetlaniem informacji o sprzedawcy w formularzu dodawania produktu. W tym celu pozostało nam nieznacznie zmienić układ formularza.

Otwórzmy naszą aplikację z produktami, a w niej plik NewProductForm.jsx. Dodajmy przed poleceniem return fragment kodu dla układu rozwijanej listy, w której będziemy wybierać sprzedawcę. Zaimplementujmy go za pomocą standardowej metody z map:

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

Teraz wprowadźmy zmiany w samym układzie. W tym celu w formularzu między pierwszym a drugim akapitem (między blokami układu dla nazwy i opisu produktu) wstawmy akapit z następującym układem:

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

Teraz możemy uruchomić naszą aplikację. W formularzu dodawania pojawiła się nam lista ze sprzedawcami. Spróbujmy wypełnić formularz danymi, wybrać jednego z nich i kliknąć przycisk zapisu. Teraz, jeśli zajrzymy do Redux DevTools, zobaczymy zmiany - w nowo dodanym produkcie pojawiła się nam właściwość seller z id wybranego sprzedawcy jako wartość. Również w zakładce State wyświetlane są teraz dwa slice'y products i sellers.