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">Seller:</label>
  <select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
    <option value=""></option>
    {sellersList}
  </select>
</p>

এখন আমরা আমাদের অ্যাপ্লিকেশন চালু করতে পারি। যোগ করার ফর্মে আমাদের কাছে বিক্রেতাদের একটি তালিকা হাজির হয়েছে। আসুন ফর্মটি ডেটা দিয়ে পূরণ করার চেষ্টা করি, তাদের মধ্যে একজন নির্বাচন করি এবং সংরক্ষণ বোতামে ক্লিক করি। এখন, যদি আমরা Redux DevTools-এ দেখি, আমরা পরিবর্তনগুলি দেখতে পাব - নতুন যোগ করা পণ্যে আমাদের seller বৈশিষ্ট্য রয়েছে যার মান হিসাবে নির্বাচিত বিক্রেতার id রয়েছে। এছাড়াও State ট্যাবে এখন দুটি স্লাইস products এবং sellers প্রদর্শিত হয়।