React Router-এ FormData সহ ডেটা আপডেট করা

আমাদের স্টোরেজে পণ্যের ডেটা আপডেট করার জন্য updateProduct ফাংশন আছে। এখন সম্পাদনা ফর্ম থেকে আমাদের ডেটা নিয়ে এগিয়ে যাব।

একটি HTML ফর্ম জমা দিলে ব্রাউজার FormData অবজেক্ট তৈরি করে এবং সার্ভারে একটি অনুরোধের বডিতে এটি প্রেরণ করে। তদুপরি, প্রতিটি ইনপুটের মান name অ্যাট্রিবিউট থেকে একটি অবজেক্টে নেওয়া হয় (সেজন্যই সেগুলি ফর্মে আমাদের প্রয়োজন ছিল, মনে আছে?)। আমরা এখন জানি যে React Router অনুরোধগুলি সার্ভারে না পাঠিয়ে আমাদের রাউটের action পদ্ধতিতে পাঠায়, সেই অনুযায়ী, FormData সেখানেই যাবে। আসুন এটি নিয়ে কাজ করি।

শুরু করতে, আমাদের ফাইল edit.jsx খুলুন এবং updateProduct ইম্পোর্ট করুন:

routes/edit.jsximport { updateProduct } from '../forStorage';

তারপর আমরা রাউট অবজেক্টের জন্য action ফাংশন লিখব, যেমনটি আমরা আগে করেছি। এটি loader ফাংশনের পরেই যোগ করুন। আমরা এটিতে আমাদের request এবং URL প্যারামিটার পাস করব:

routes/edit.jsxexport async function action({ request, params }) {}

আমরা অনুরোধ থেকে FormData পাব, তারপর এটি থেকে একটি অবজেক্ট আকারে ডেটা বের করব, যাতে কী: মান জোড়া থাকে এবং updateProduct ব্যবহার করে স্টোরেজে এই ডেটা পাঠাব:

routes/edit.jsxexport async function action({ request, params }) {
  const formData = await request.formData();
  const updates = Object.fromEntries(formData);
  await updateProduct(params.productId, updates);
  return 1;
}

শুধুমাত্র main.jsx-এ যেতে বাকি এবং এডিট রাউটের অবজেক্টে action ফাংশন যোগ করতে হবে। ইম্পোর্ট করি action:

main.jsximport EditProduct, {
  loader as editProductLoader,
  action as editAction,
} from './routes/edit';

এবং এডিট রাউটের অবজেক্টে এটি যোগ করুন:

main.jsx{
  path: 'products/:productId/edit',
  element: <EditProduct />,
  loader: editProductLoader,
  action: editAction,
},

এখন অ্যাপ্লিকেশন চালু করুন, তালিকায় কয়েকটি পণ্য যোগ করুন, তারপর সেগুলিতে ক্লিক করে ফর্ম পূরণ করুন এবং সেভ বাটনে ক্লিক করুন। ডেভেলপার টুলের localforage বিভাগে যেতে ভুলবেন না এবং স্টোরেজ রিফ্রেশ করুন। এখন keyvaluespairs বিভাগে আমরা products অ্যারে में আমাদের প্রবেশ করা ডেটা সহ অবজেক্ট দেখতে পারি।