Redux-এ ব্রাউজারে পণ্য সম্পাদনা পৃষ্ঠা

গত ক্লাসে আমরা একটি ফর্ম তৈরি করেছি পণ্য সম্পাদনার জন্য। আসুন এটির জন্য একটি রুট সংযুক্ত করি।

আমাদের পণ্য অ্যাপ্লিকেশন খুলুন, এবং এতে App.jsx ফাইলটি খুলুন এবং আরও একটি চাইল্ড রুট অবজেক্ট যোগ করুন children প্রপার্টির অ্যারেতে (EditProductForm ইম্পোর্ট করতে ভুলবেন না):

App.jsx{
  path: '/editProduct/:productId',
  element: <EditProductForm />,
},

এছাড়াও সম্পাদনা ফর্মে যাওয়ার জন্য আমাদের একটি লিঙ্ক তৈরি করতে হবে। এর জন্য ProductPage.jsx খুলুন এবং এই লিঙ্কটি রিটার্ন করা মার্কআপে পণ্যের পরিমাণ সহ শেষ অনুচ্ছেদের পরে এবং বন্ধ করা div-এর আগে রাখুন:

products/ProductPage.jsx<Link to={`/editProduct/${product.id}`} className="link-btn">
  edit
</Link>

রাউটার লাইব্রেরি থেকে Link ইম্পোর্ট করুন:

products/ProductPage.jsximport { Link } from 'react-router-dom'

আমাদের অ্যাপ্লিকেশন চালু করুন এবং কোনো পণ্যের দেখুন বাটনে ক্লিক করুন। এটি সম্পাদনা করার চেষ্টা করুন এবং পণ্যের তালিকায় ফিরে যান, বাম মেনুতে 'Products' লিঙ্কে ক্লিক করে। এছাড়াও Redux DevTools-এ আপনি একটি নতুন অ্যাকশন productUpdated দেখতে পারেন এবং স্টোরে পণ্য অবজেক্টের পরিবর্তনগুলি দেখতে পারেন।