A változtatások végrehajtása a Redux űrlapban

Ezen az órán befejezzük munkánkat az eladó adatainak megjelenítésére az új termék hozzáadására szolgáló űrlapban. Ehhez már csak kicsit kell módosítanunk az űrlap megjelenésén.

Nyissuk meg a termékalkalmazásunkat, és benne a NewProductForm.jsx fájlt. Adjunk hozzá a return parancs elé egy kódrészletet a legördülő lista megjelenítéséhez, ahol kiválasztjuk az eladót. Valósítsuk meg a szabványos map módszerrel:

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

És most végezzük el a módosításokat magán a megjelenésen. Ehhez az űrlapban az első és a második bekezdés között (a termék nevének és leírásának megjelenési blokkja között) illesszünk be egy bekezdést a következő megjelenéssel:

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

Most elindíthatjuk alkalmazásunkat. Az új termék hozzáadására szolgáló űrlapban megjelent egy legördülő lista az eladókkal. Próbáljuk meg kitölteni az űrlapot adatokkal, kiválasztani egy eladót és rákattintani a mentés gombra. Most, ha megnézzük a Redux DevTools-ot, mi változásokat fogunk látni - az újonnan hozzáadott termékben megjelent egy seller tulajdonság a kiválasztott eladó azonosítójával, mint érték. A State fülön mostantól két slice jelenik meg: a products és a sellers.