Уношење измена у форму у Redux-у

На овом часу ћемо завршити посао по испису информација о продавцу у форми за додавање производа. За то нам је остало мало да изменимо верстак форме.

Отворимо нашу апликацију са производима, а у њој фајл NewProductForm.jsx. Хајде пред команду return да додамо комадић кода за верстак падајуће листе, у којој ћемо бирати продавца. Имплементирајмо га преко стандардног начина са map:

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

И сада унесемо измене у сам верстак. За то у форми између првог и другог пасуса (између блокова верстака за назив и опис производа) убацимо пасус са следећим верстаком:

products/NewProductForm.jsx<p>
  <label htmlFor="prodSeller">Продавац:</label>
  <select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
    <option value=""></option>
    {sellersList}
  </select>
</p>

Сада можемо покренути нашу апликацију. У форми за додавање нам се појавила листа са продавцима. Покушајмо да попунимо форму подацима, изаберемо једног од њих и кликнемо на дугме за чување. Сада, ако погледамо у Redux DevTools, ми ћемо видети измене - у новом додатом производу нам се појавило својство seller са id изабраног продавца у качеству вредности. Такође у картици State сада се приказују два слајса products и sellers.