Redux-এ ব্রাউজারে পণ্য সম্পাদনা পৃষ্ঠা
গত ক্লাসে আমরা একটি ফর্ম তৈরি করেছি পণ্য সম্পাদনার জন্য। আসুন এটির জন্য একটি রুট সংযুক্ত করি।
আমাদের পণ্য অ্যাপ্লিকেশন খুলুন,
এবং এতে App.jsx ফাইলটি খুলুন এবং আরও একটি
চাইল্ড রুট অবজেক্ট যোগ করুন
children প্রপার্টির অ্যারেতে (EditProductForm
ইম্পোর্ট করতে ভুলবেন না):
{
path: '/editProduct/:productId',
element: <EditProductForm />,
},
এছাড়াও সম্পাদনা ফর্মে যাওয়ার জন্য
আমাদের একটি লিঙ্ক তৈরি করতে হবে। এর জন্য
ProductPage.jsx খুলুন এবং এই লিঙ্কটি
রিটার্ন করা মার্কআপে পণ্যের পরিমাণ সহ শেষ
অনুচ্ছেদের পরে এবং বন্ধ করা div-এর আগে রাখুন:
<Link to={`/editProduct/${product.id}`} className="link-btn">
edit
</Link>
রাউটার লাইব্রেরি থেকে Link ইম্পোর্ট করুন:
import { Link } from 'react-router-dom'
আমাদের অ্যাপ্লিকেশন চালু করুন এবং কোনো
পণ্যের দেখুন বাটনে ক্লিক করুন। এটি
সম্পাদনা করার চেষ্টা করুন এবং পণ্যের তালিকায়
ফিরে যান, বাম মেনুতে 'Products' লিঙ্কে ক্লিক করে।
এছাড়াও Redux DevTools-এ আপনি একটি নতুন অ্যাকশন
productUpdated দেখতে পারেন এবং স্টোরে
পণ্য অবজেক্টের পরিবর্তনগুলি দেখতে পারেন।
আপনার শিক্ষার্থীদের অ্যাপ্লিকেশন খুলুন।
App.jsx ফাইলে একজন শিক্ষার্থীর ডেটা সম্পাদনার জন্য
আরও একটি চাইল্ড রুট যোগ করুন।
শিক্ষার্থীর পৃষ্ঠার মার্কআপে একটি Link এলিমেন্ট যোগ করুন
তার ডেটা সম্পাদনার পৃষ্ঠায় যাওয়ার জন্য।
আপনার অ্যাপ্লিকেশন চালু করুন, কোনো শিক্ষার্থীর ডেটা সম্পাদনা করার চেষ্টা করুন। আপনি যখন সম্পাদনা পৃষ্ঠায় থাকবেন তখন ব্রাউজারের অ্যাড্রেস বারে মনোযোগ দিন। ব্রাউজারের Redux DevTools-এ পরিবর্তনগুলি দেখুন।
