Redux-এ ফর্ম এবং লোকাল স্টেট

পূর্ববর্তী পাঠগুলোতে, আমরা store থেকে ডেটা নেওয়া এবং সেগুলো React কম্পোনেন্টে দেখানো শিখেছি। এই পাঠে, আমরা নতুন ডেটা যোগ করা শুরু করব। আমরা এটি একটি ফর্মের মাধ্যমে করব, যা পূরণ করে, বিক্রেতা একটি নতুন পণ্য যোগ করতে পারবেন।

আমরা এটি দিয়ে শুরু করি যে, সবসময় গ্লোবাল Redux স্টেট ব্যবহার করার কোনো মানে হয় না। কিছু ক্ষেত্রে আছে, যেখানে আমাদের প্রয়োজনের জন্য আমরা লোকাল স্টেট তৈরি করতে পারি। লোকাল স্টেট দ্বারা আমরা সেই স্টেটগুলিকে বোঝাই যেগুলো নির্দিষ্ট কম্পোনেন্টের ভিতরে প্রযুক্তিগত প্রয়োজনে ব্যবহার করা হয়। উদাহরণস্বরূপ, একটি বাটন দ্বারা কিছু লুকানো বা দেখানোর জন্য।

আমাদের ক্ষেত্রে, ব্যবহারকারী ফর্মে ডেটা প্রবেশ করাবেন এবং স্বাভাবিকভাবেই, এর জন্য আমাদের স্টেটের প্রয়োজন হবে। গ্লোবাল Redux স্টেট ব্যবহার করা যেত, কিন্তু এটির কোনো মানে নেই, কারণ আমাদের স্টেটগুলি শুধুমাত্র অ্যাপ্লিকেশনের একটি জায়গায় কাজ করবে নতুন পণ্য যোগ করার ফর্মের জন্য। প্রধান নিয়ম যা অনুসরণ করতে হবে তা হল - লোকাল স্টেটগুলি যেন যে কম্পোনেন্টে তৈরি হয়েছে তার সীমানার বাইরে কাজ না করে, এবং কোনভাবেই store-কে স্পর্শ না করে। এমন অনুশীলন প্রায়ই ফর্ম তৈরি করার সময় ব্যবহার করা হয়।

আসুন আমরা আমাদের পণ্য অ্যাপ্লিকেশনের products ফোল্ডারটি খুলি, এর ভিতরে NewProductForm.jsx ফাইল তৈরি করি এবং এতে useState হুকটি ইম্পোর্ট করি:

products/NewProductForm.jsximport { useState } from 'react'

এখন আসল কম্পোনেন্টটি একটি ফর্ম সহ তৈরি করি এবং এতে সাধারণ স্টেট লিখি, যেমন আমরা আগে React-এ করতাম। আমাদের পণ্যের নাম, বিবরণ, মূল্য এবং পরিমাণ নিয়ে কাজ করার জন্য স্টেট দরকার:

products/NewProductForm.jsxexport const NewProductForm = () => {
  const [name, setName] = useState('')
  const [desc, setDesc] = useState('')
  const [price, setPrice] = useState(0)
  const [amount, setAmount] = useState(0)
}

এরপর ব্যবহারকারীর দ্বারা ডেটা প্রবেশ করানোর সময় প্রতিটি ফিল্ডের জন্য স্ট্যান্ডার্ড প্রসেসিং যোগ করি:

products/NewProductForm.jsxconst onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

এবং তারপর কম্পোনেন্টে একটি শিরোনাম এবং খালি ফর্ম সহ মার্কআপ রিটার্ন করি:

products/NewProductForm.jsxreturn (
  <div>
    <h2>Add a New Product</h2>
    <form>
    </form>
  </div>
)