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 көрсетіледі.