React Router-এ action মেথড ব্যবহার করে ডেটা যোগ করা

এই পাঠে আমরা রাউট অবজেক্টের action মেথডের সাথে পরিচিত হব। এই মেথডটি তখন কল হয় যখন অ্যাপ্লিকেশনটি আপনার রাউটে POST, PUT, PATCH বা DELETE (GET ছাড়া) ধরনের HTTP রিকোয়েস্ট পাঠায়।

শুরুতে, আমরা আগের পাঠে লেখা পণ্য তৈরির ফাংশনটি আমাদের root.jsx-এ ইম্পোর্ট করব:

routes/root.jsximport { createProduct } from '../forStorage';

এখন আমাদের একটি action ফাংশন তৈরি করতে হবে, যেটি React Router কল করবে পণ্য যোগ করার বাটনে ক্লিক করলে, আমরা এটিকে loader ফাংশনের পরে রাখব:

routes/root.jsxexport async function action() {
  const product = await createProduct();
  return { product };
}

আসুন main.jsx খুলি এবং action ইম্পোর্ট করি:

main.jsximport Root, {
  loader as rootLoader,
  action as rootAction
} from './routes/root';

এবং রাউট অবজেক্টের action মেথডের মান হিসাবে এটি সেট করি। Form কম্পোনেন্ট ব্রাউজারকে বাটন ক্লিক করলে সার্ভারে রিকোয়েস্ট পাঠাতে দেবে না, বরং আমাদের রাউটের action মেথডে যোগাযোগ করবে। React Router দিয়ে ক্লায়েন্ট সাইড রাউটিং এভাবে আকর্ষণীয়ভাবে কাজ করে:

main.jsxconst router = createBrowserRouter([
  {
    path: '/',
    element: <Root />,
    errorElement: <ErrorPage404 />,
    loader: rootLoader,
    action: rootAction,
    children: [
      {
        path: 'products/:productId',
        element: <Product />,
      },
    ],
  },
  
]);

আসুন আমাদের অ্যাপ্লিকেশন চালু করি। ডেভেলপার প্যানেলের 'অ্যাপ্লিকেশন' (Chrome-এর জন্য Application) ট্যাব খুলি, বিভিন্ন ধরনের স্টোরেজের মধ্যে indexedDB-এ ক্লিক করি, এখানে আমাদের আগ্রহের বিষয় হল localforage। এখন আমাদের অ্যাপ্লিকেশনে পণ্য যোগ করার বাটনে ক্লিক করে এবং ক্লিক করার পর localforage স্টোরেজ রিফ্রেশ করলে আমরা দেখতে পাই কিভাবে keyvaluepairs-এ products অ্যারে में বিভিন্ন id সহ অবজেক্ট যোগ হয়। বিজয়!!! এর মানে হল আমাদের স্টোরেজে এন্ট্রি তৈরি হচ্ছে! অবশ্যই আমাদের অ্যাপ্লিকেশনের তালিকাও পূর্ণ হয়। সুপারিশ: পরে Application-এর 'Storage' ট্যাবে এই পৃষ্ঠার সংরক্ষিত ডেটা ক্লিয়ার করতে ভুলবেন না।