Redux-এ কম্পোনেন্ট থেকে থাঙ্ক প্রেরণ

এই পাঠে আমরা React-কম্পোনেন্ট ProductsList থেকে পণ্য পাওয়ার জন্য একটি থাঙ্ক প্রেরণ করব।

চলুন এখন আমাদের পণ্য অ্যাপ্লিকেশনটি খুলি, এবং এর মধ্যে ProductsList.jsx ফাইলটি খুলি। প্রথমে আমরা যে থাঙ্ক fetchProducts তৈরি করেছি সেটি ইম্পোর্ট করব:

import { selectAllProducts, fetchProducts } from './productsSlice'

আমাদের থাঙ্ক প্রেরণ করার জন্য useDispatch হুকটি এবং useEffect হুকটিরও প্রয়োজন হবে কারণ এখানে আমাদের একটি সাইড ইফেক্ট রয়েছে, যেহেতু আমরা নেটওয়ার্কের সাথে কাজ করছি, এবং এটি ইতিমধ্যেই একটি বাহ্যিক API:

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

এখন ProductsList ফাংশনের কোডের প্রথম লাইনে products ডিক্লেয়ার করার আগে যোগ করব:

const dispatch = useDispatch()

পরবর্তীতে, স্টেট থেকে পণ্য পাওয়ার সময় আমরা অনুরোধের স্ট্যাটাসও এক্সট্র্যাক্ট করব:

const products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)

এবং এর পরেই useEffect হুক ব্যবহার করে React-কে বলব যে কম্পোনেন্ট রেন্ডার হওয়ার পরে আমাদের পণ্য পেতে হবে। এখানেই আমাদের অনুরোধের স্ট্যাটাসের প্রয়োজন হবে, কারণ এটি গুরুত্বপূর্ণ যে এমন অনুরোধ শুধুমাত্র একবার প্রেরণ করা হয়:

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

আমরা এখন আমাদের অ্যাপ্লিকেশন চালু করতে পারি, এতে বাম মেনুতে 'Products'-এ ক্লিক করতে পারি। আমরা এখনও পণ্যের তালিকা দেখতে পাব না, কিন্তু যদি আমরা আমাদের Redux DevTools-এ যাই, তবে বাম প্যানেলে আমরা স্বয়ংক্রিয়ভাবে জেনারেট হওয়া অ্যাকশনগুলি দেখতে পাব products/fetchProducts/pending এবং fulfilled (যেমনটি আমি আগের পাঠে বলেছিলাম)। এখন চলুন products/fetchProducts/fulfilled অ্যাকশনে ক্লিক করি এবং এর payload ফিল্ডটি দেখি - এখানেই আমাদের পণ্যের তালিকা রয়েছে! হুরRAY, আমাদের চেইনের সমস্ত লিঙ্ক - সার্ভার, ডাটাবেস, ক্লায়েন্ট এবং Redux - অ্যাপ্লিকেশনটি সামঞ্জস্যপূর্ণভাবে এবং একসাথে কাজ করছে। যাইহোক, আপনি দেখতে পাচ্ছেন এখানে meta প্রপার্টিও রয়েছে, যেখানে আমরা অনুরোধের স্ট্যাটাস দেখতে পাচ্ছি।

আরও একটি বিষয় লক্ষ্য করি, আপনার ক্ষেত্রে এমন হতে পারে যে pending এবং, ফলে, fulfilled দুইবার করে দেখাবে। যদি তাই হয়, তবে হতাশ হবেন না, আমরা এটি নিয়ে পরে আলোচনা করব।

আপনার শিক্ষার্থীদের অ্যাপ্লিকেশনটি খুলুন। এতে StudentsList.jsx ফাইলটি খুলুন। পাঠের উপাদান অনুসারে এতে প্রয়োজনীয় হুক এবং থাঙ্ক ইম্পোর্ট করুন।

পাঠের উপাদান অধ্যয়ন করে, অনুরোধের স্ট্যাটাস studentStatus পান, এবং তারপর, useEffect ব্যবহার করে, fetchStudents শুধুমাত্র তখনই প্রেরণ করুন যখন studentStatus-এর মান - 'idle' হয়।

আপনার অ্যাপ্লিকেশন চালু করুন, বাম মেনুতে 'Students'-এ ক্লিক করুন, এবং তারপর ব্রাউজারে Redux DevTools এক্সটেনশন চালু করুন, এই পাঠের মতোই আপনার pending এবং fulfilled (এবং এতে payload সহ শিক্ষার্থীদের) অ্যাকশনগুলি দেখতে পাওয়া উচিত। এক্সটেনশনের ট্যাবগুলি ঘুরে দেখুন।