Pakeitimų įvedimas Redux formoje

Šioje pamokoje mes baigsime darbą pardavėjo informacijos atvaizdavime produkto pridėjimo formoje. Tam mums belieka šiek tiek pakeisti formos išdėstymą.

Atidarykime mūsų produktų aplikaciją, o joje failą NewProductForm.jsx. Prieš komandą return pridėkime kodo fragmentą išskleidžiamojo sąrašo, kuriame mes pasirinksime pardavėją, išdėstymui. Įgyvendinkime jį per standartinį būdą su map:

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

Ir dabar atlikime pakeitimus pačiame išdėstyme. Tam formoje tarp pirmos ir antros pastraipų (tarp išdėstymo blokų pavadinimui ir produkto aprašymui) įterpkime pastraipą su šiuo išdėstymu:

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

Dabar mes galime paleisti mūsų aplikaciją. Pridėjimo formoje pasirodė sąrašas su pardavėjais. Pabandykime užpildyti formą duomenimis, pasirinkti vieną iš jų ir spustelėti išsaugojimo mygtuką. Dabar, jei pažvelgsime į Redux DevTools, mes pamatysime pakeitimus - naujame pridėtame produkte pasirodė savybė seller su pasirinkto pardavėjo id kaip reikšme. Taip pat skirtuke State dabar rodomi du suskirstyti duomenys (slices) products ir sellers.