Redux-এ অনুরোধের ডুপ্লিকেশন দূর করা

এই পাঠটি আমাদের জন্য উপযোগী হবে যদি, অ্যাপ্লিকেশন চালু করার সময়, ডেটা অনুরোধ পাঠানো ডুপ্লিকেট হয়, এবং তারপর একই id সহ পণ্যগুলির জোড়া আসে, এবং ফলস্বরূপ, ব্রাউজার কনসোলে ভয়ানক লাল সতর্কবার্তা প্রকাশিত হয়।

এর কারণটি React 18 সংস্করণ এবং তার উপরের সংস্করণে ডেভেলপমেন্ট মোডে (dev), React.StrictMode ব্যবহার করার সময় কম্পোনেন্ট মাউন্ট করার বিশেষত্বে রয়েছে (তারা বলে, প্রোডাকশন মোডে এটি নিয়ে সব ঠিক আছে)। প্রথমে কম্পোনেন্টটি সংযুক্ত হয়, তারপর সংযোগ বিচ্ছিন্ন হয় এবং আবার সংযুক্ত হয়। সেইজন্য অনুরোধ দুবার পাঠানো হয়।

সম্ভবত, যখন আপনি এই উপাদানটি অধ্যয়ন করবেন, React-এর এই ডাবল মাউন্টিং ইতিমধ্যেই কোনোভাবে পরিবর্তিত হয়ে যাবে। আমরা গভীরে যাব না, বরং সহজভাবে React হুক useRef ব্যবহার করব, যা আমাদের এই অসঙ্গতি এড়াতে সাহায্য করবে।

আসুন আমাদের পণ্য সহ অ্যাপ্লিকেশনটি খুলি, এবং এতে ProductsList.jsx ফাইলটি খুলি। এতে useRef হুকটি ইম্পোর্ট করি:

import { useEffect, useRef } from 'react'

এবং এখন useEffect সহ নিম্নলিখিত কোড ব্লকটি একটু পরিবর্তন করি:

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

প্রথমে useRef-এর জন্য একটি নতুন ভেরিয়েবল dataFetch প্রবর্তন করি। প্রাথমিকভাবে এর current প্রপার্টি false-এ সেট করি। যদি অ্যাপ্লিকেশন ইতিমধ্যেই চালু হয়ে থাকে এবং সেই অনুযায়ী, অনুরোধ ইতিমধ্যেই পাঠানো হয়ে থাকে, তাহলে current প্রপার্টিটি ইতিমধ্যেই true হবে, যার মানে আমরা কেবল ফাংশন থেকে বের হয়ে আসব এবং ডেটার পুনরায় অনুরোধ করা হবে না। সুতরাং, উপরে উল্লিখিত কোডের অংশটি এখন এইরকম হবে:

const dataFetch = useRef(false)

useEffect(() => {
	if (dataFetch.current) return
	dataFetch.current = true
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

এখন আবার আমাদের অ্যাপ্লিকেশন চালু করি এবং স্বস্তি সহ লক্ষ্য করি কনসোলে লাল সতর্কবার্তাগুলির অবলুপ্তি, এবং ডুপ্লিকেট ছাড়াই পণ্যের তালিকা দেখি, এখন সেখানে 8টি রয়েছে, ঠিক যেমন আমরা সার্ভারে পরিকল্পনা করেছিলাম। এখন Redux DevTools-এ একশনগুলি, যেগুলো অনুরোধের সময় তৈরি হয়, সেগুলি আবার পুনরাবৃত্তি হয় না।

আপনার শিক্ষার্থীদের সাথে অ্যাপ্লিকেশনটি খুলুন, এবং এতে StudentsList.jsx ফাইলটি খুলুন। পাঠের উপাদান অনুসারে ডাবল অনুরোধের সমস্যাটি দূর করুন, যদি আপনার কাছে এমনটি থেকে থাকে।