Redux-এ action প্রেরণ এবং useDispatch হুক

আমরা Redux অ্যাপ্লিকেশন কাজ করার জন্য প্রায় সব উপাদান বাস্তবায়ন করেছি। শুধু React কম্পোনেন্ট থেকে action প্রেরণ নিয়ে বুঝতে হবে। শুরু করা যাক।

আমাদের পণ্য সহ অ্যাপ্লিকেশনটি খুলুন। NewProductForm কম্পোনেন্টের ফর্মে আমাদের একটি নতুন পণ্যের ডেটা সংরক্ষণের জন্য একটি বাটন আছে। আসুন এটিতে একটি ক্লিক হ্যান্ডলার সংযুক্ত করি। এটিতে ক্লিক করলে onSaveProductClick হ্যান্ডলার ট্রিগার হোক:

<button type="button" onClick={onSaveProductClick}>
	save
</button>

একটি নতুন পণ্য তৈরি করার সময় আমাদের এর জন্য একটি নতুন id প্রয়োজন হবে। আমরা এটি সুপরিচিত লাইব্রেরি nanoid ব্যবহার করে তৈরি করব। যাইহোক, এটি ইনস্টল করার দরকার নেই, কারণ এটি ইতিমধ্যেই RTK প্যাকেজের সাথে আসে। আসুন nanoid ইম্পোর্টে যোগ করি:

import { nanoid } from '@reduxjs/toolkit'

আমরা আরও মনে রাখি যে state পরিবর্তনের একমাত্র উপায় হল dispatch মেথডটি কল করা, যা store-এ আছে এবং action অবজেক্ট পাস করা। এই মেথডে পৌঁছানোর জন্য, আমরা React-Redux হুক useDispatch প্রয়োগ করব। আসুন এটি ইম্পোর্ট করি:

import { useDispatch } from 'react-redux'

NewProductForm ফাংশনের কোডে এর জন্য একটি কনস্ট্যান্ট dispatch ডিক্লেয়ার করি ঠিক আমাদের লোকাল স্টেটগুলোর জন্য কনস্ট্যান্ট ডিক্লেয়ার করার পর:

const dispatch = useDispatch()

আমাদের আগের পাঠে পাওয়া action creator productAdded কে ইম্পোর্ট করতেও হবে:

import { productAdded } from './productsSlice'

এখন আমরা onSaveProductClick হ্যান্ডলার ফাংশনটি লিখতে পারি। আসুন এটি return কমান্ডের আগে করি:

const onSaveProductClick = () => {}

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

const onSaveProductClick = () => {
	if (name && desc && price && amount) {
		dispatch(
			productAdded({
				id: nanoid(),
				name,
				desc,
				price,
				amount
			})
		)

		setName('')
		setDesc('')
		setPrice(0)
		setAmount(0)
	}
}

এখন আমাদের অ্যাপ্লিকেশন চালু করি, ফর্ম ফিল্ডে ডেটা লিখি এবং সংরক্ষণ বাটনে ক্লিক করি। হুর्रे, পৃষ্ঠার নীচে একটি নতুন পণ্য উপস্থিত হয়েছে। Redux DevTools খুলে, এবং সেখানে Inspector ট্যাব খুলে, আমরা দেখতে পাই যে বাম দিকে @@INIT ছাড়াও আমাদের action products/productAdded উপস্থিত হয়েছে। এবং ডান অংশে আমরা Action এবং State ট্যাবগুলিতে ক্লিক করতে পারি, একই সময়ে @@INIT এবং products/productAdded স্যুইচ করে। এখন আমরা দেখতে পাই যে আমাদের নতুন পণ্য যোগ হয়। এছাড়াও Action ট্যাবে আমরা স্বয়ংক্রিয়ভাবে জেনারেট করা action দেখতে পাই createSlice ব্যবহার করে (উদাহরণস্বরূপ, Raw-এ ক্লিক করুন)। হুর्रे: আমাদের এটি ম্যানুয়ালি লিখতে হয়নি।

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশন খুলুন, এবং তারপর NewStudentForm.jsx ফাইল খুলুন, সংরক্ষণ বাটনে একটি ক্লিক হ্যান্ডলার সংযুক্ত করুন।

সমস্ত প্রয়োজনীয় ইম্পোর্ট লিখুন এবং onSaveStudentClick হ্যান্ডলার ফাংশন লিখুন, dispatch মেথড প্রয়োগ করে যেমন পাঠে দেখানো হয়েছে।

অ্যাপ্লিকেশন চালু করুন, ফর্ম ফিল্ডে ডেটা লিখুন এবং সংরক্ষণ বাটনে ক্লিক করুন। নিশ্চিত হন যে পৃষ্ঠার নীচে একটি নতুন শিক্ষার্থী যোগ হয়েছে।

Redux DevTools খুলুন এবং Action এবং State ট্যাবগুলি দেখুন, নিশ্চিত হন যে নতুন শিক্ষার্থী অবজেক্ট যোগ হচ্ছে। আপনার কাছে জেনারেট হওয়া action অবজেক্টটি দেখুন, এই কাজের উত্তরে এটি পাঠান।