Izmene u formi u Redux-u

Na ovom času ćemo završiti rad na prikazivanju informacija o prodavcu u formi za dodavanje proizvoda. Za ovo nam preostaje da malo izmenimo izgled forme.

Otvorimo našu aplikaciju sa proizvodima, a u njoj fajl NewProductForm.jsx. Hajde pre naredbe return dodajmo deo koda za izgled padajuće liste, u kojoj ćemo birati prodavca. Implementiraćemo je preko standardnog načina sa map:

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

I sada unesimo izmene u sam izgled. Za ovo u formi između prvog i drugog pasuša (između blokova za naziv i opis proizvoda) ubacimo pasuš sa sledećim izgledom:

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

Sada možemo pokrenuti našu aplikaciju. U formi za dodavanje pojaviće nam se lista sa prodavcima. Pokušajmo da popunimo formu podacima, izaberemo jednog od njih i kliknemo na dugme za čuvanje. Sada, ako pogledamo u Redux DevTools, mi ćemo videti izmene - u novododatom proizvodu pojaviće nam se svojstvo seller sa id izabranog prodavca kao vrednošću. Takođe, u kartici State sada se prikazuju dva slajsa products i sellers.