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: