Redux-এ বিক্রেতার তথ্য যোগ করা

আমরা আগেই আলোচনা করেছি যে আমাদের পণ্যগুলি বাস্তবে বিক্রেতাদের দ্বারা অ্যাপ্লিকেশনে যোগ করা হয়। আসুন একটি নতুন পণ্য যোগ করার সময় বিক্রেতার তথ্য প্রদর্শন করি।

আমাদের পণ্য অ্যাপ্লিকেশনটি খুলুন, এবং এর মধ্যে productsSlice.js ফাইলটি খুলুন। আসুন prepare-এ আরও একটি প্যারামিটার পাস করি, এটির নাম দিই sellerId এবং এটিকে একশনের payload-এর জন্য সেট করি। এখন আমাদের prepare-এর জন্য কোডের অংশটি এইরকম হবে:

products/productsSlice.jsprepare(name, desc, price, amount, sellerId) {
  return {
    payload: {
      id: nanoid(),
      name,
      desc,
      price,
      amount,
      seller: sellerId,
    },
  }
},

এখন আমাদের NewProductForm.jsx ফাইলে একটি পণ্য যোগ করার ফর্মটিতে কয়েকটি পরিবর্তন আনতে হবে। প্রথমে আসুন বিক্রেতার id-এর জন্য আরও একটি লোকাল স্টেট যোগ করি:

products/NewProductForm.jsxconst [sellerId, setSellerId] = useState('')

এরপর useDispatch-এর জন্য dispatch ভেরিয়েবল ডিক্লেয়ার করার পর, useSelector হুক ব্যবহার করে স্টেট থেকে বিক্রেতাদের স্লাইস পেতে কোড যোগ করি:

products/NewProductForm.jsxconst sellers = useSelector((state) => state.sellers)

ইনপুট ফিল্ডের জন্য হ্যান্ডলারে আমরা আরও একটি যোগ করব:

products/NewProductForm.jsxconst onSellerChanged = (e) => setSellerId(e.target.value)

onSaveProductClick-টি সংশোধন করি, productAdded একশনের জন্য sellerId যোগ করে:

products/NewProductForm.jsxdispatch(productAdded(name, desc, price, amount, sellerId))