Redux-এ ডেটা সম্পাদনার জন্য ফর্ম

এখন আমাদের store-এ ডেটা পরিবর্তনের জন্য reducer রয়েছে। এই পাঠে আমরা একটি ফর্ম তৈরি করব, যার সাহায্যে আমরা একটি পণ্যের ডেটা সম্পাদনা করতে সক্ষম হব।

আসুন আমাদের পণ্য অ্যাপ্লিকেশনটি খুলি এবং products ফোল্ডারে EditProductForm.jsx ফাইলটি 创建 করুন। EditProductForm কম্পোনেন্ট তৈরি করা NewProductForm-এর অনুরূপ হবে, কিছু পার্থক্য বাদে, যেগুলোর উপর আমরা আলোচনা করব। তাই NewProductForm.jsx-এর সম্পূর্ণ কোড কপি করুন এবং এটি তৈরি করা EditProductForm.jsx ফাইলে পেস্ট করুন। এখন শুরু করা যাক ধাপে ধাপে।

ইম্পোর্ট থেকে nanoid সরিয়ে দিন, এখানে আমাদের id জেনারেট করার প্রয়োজন নেই। ইম্পোর্ট productAdded কে productUpdated দিয়ে প্রতিস্থাপন করুন, কারণ এখানে আমরা একটি action ব্যবহার করব আপডেট করার জন্য, যোগ করার জন্য নয়।

এরপর, আমাদের কম্পোনেন্ট ফাংশনের নাম NewProductForm থেকে EditProductForm-এ পরিবর্তন করুন।

EditProductForm ফাংশনে লোকাল state name, desc, price এবং amount-এর জন্য সংজ্ঞায়িত করার আগে, আসুন আরও কয়েকটি লাইন কোড যোগ করি। যেমনটি আমরা আগেই উল্লেখ করেছি, এখানে আমাদের id জেনারেট করার প্রয়োজন নেই। এখন আমাদের কাজ হল এটি পরিবর্তনযোগ্য পণ্যের ডেটা থেকে পাওয়া। আমরা ইতিমধ্যেই এটি একটি পৃথক পণ্য পৃষ্ঠা তৈরি করার সময় করেছি। সুতরাং, useParams হুক ব্যবহার করে id পান, এবং তারপর প্রয়োজনীয় পণ্যটি খুঁজে বের করুন, useSelector হুক ব্যবহার করে (ফাইলের শুরুতে উভয় হুক ইম্পোর্ট করতে ভুলবেন না):

products/EditProductForm.jsxlet params = useParams()
const { productId } = params

const product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

এর পরে, লোকাল state ডিক্লেয়ার করার ব্লকটি পরিবর্তন করুন। এখন আমাদের প্রয়োজন প্রাথমিক মান হিসাবে store থেকে প্রাপ্ত পণ্যের ডেটা সেট করা। প্রথম stateটি এইরকম দেখাবে, বাকি তিনটি নিজে থেকে পরিবর্তন করুন:

products/EditProductForm.jsxconst [name, setName] = useState(product.name)

useDispatch-এর জন্য ভেরিয়েবল নির্ধারণ করার পরে আসুন আরও একটি লাইন কোড যোগ করি এইবার useNavigate হুকের জন্য। আমরা এটি ব্যবহার করব পণ্য পৃষ্ঠায় ফিরে যেতে, যখন ব্যবহারকারী ফর্মে করা পরিবর্তনগুলি সেভ করবে:

products/EditProductForm.jsxconst navigate = useNavigate()

এছাড়াও ফাইলের শুরুতে এই হুকটি ইম্পোর্ট করুন:

products/EditProductForm.jsximport { useNavigate, useParams } from 'react-router-dom'

এরপর আমাদের আছে ইনপুট ফিল্ডের জন্য হ্যান্ডলারগুলি। 그리고 সেগুলোর পরে আমাদের প্রয়োজন onSaveProductClick ফাংশনটি সংশোধন করা। এখন এতে ক্লিক করলে আমরা productUpdated action পাঠাবো প্রাপ্ত id সহ এবং একটি অবজেক্ট আকারে পরিবর্তিত ডেটা। তারপর আমরা আমাদের navigate যোগ করব, পরিবর্তিত পণ্যের পৃষ্ঠায় যাওয়ার জন্য:

products/EditProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productUpdated({
        id: productId,
        name,
        desc,
        price,
        amount,
      })
    );
    
    navigate(`/products/${productId}`);
  }
}

শুধু আমাদের রিটার্ন করা মার্কআপে এই লাইনটি খুঁজে বের করতে বাকি:

products/EditProductForm.jsx<h2>Add a New Product</h2>

এবং এটিকে এটি দিয়ে প্রতিস্থাপন করুন:

products/EditProductForm.jsx<h2>Edit Product</h2>