Redux හි අනුපිටපත් ඉල්ලීම් තුරන් කිරීම

යෙදුම දියත් කරන විට දත්ත ඉල්ලීම් යැවීම අනුපිටපත් වන අතර, ඉන්පසු එකම id සහිත නිෂ්පාදිත යුගල පැමිණ, එහි ප්‍රතිඵලයක් ලෙස බ්‍රව්සරයේ කොන්සෝලයේ භයංකර රතු අනතුරු ඇඟවීම් (warnings) දිස්වන්නේ නම්, මෙම පාඩම අපට ප්‍රයෝජනවත් වනු ඇත.

මෙහි හේතුව React 18 සහ ඊට ඉහළ අනුවාදවල සංවර්ධන (dev) ප්‍රකාරයේදී, React.StrictMode භාවිතා කිරීමේදී (production ප්‍රකාරයේ මෙම ගැටලුව නොමැති බව කියනු ලැබේ) සංරචක (components) සවි (mount) කිරීමේ විශේෂාංගයෙනි. පළමුව සංරචකය සම්බන්ධ වේ, පසුව විසන්ධි වී නැවත සම්බන්ධ වේ. එබැවින් ඉල්ලීම දෙවරක් යවනු ලැබේ.

ඔබ මෙම ද්‍රව්‍යය අධ්‍යයනය කරන විට, React හි මෙම ද්විත්ව සවි කිරීම (double mounting) යම් ආකාරයකින් වෙනස් කර ඇති විය හැකිය. අපි ගැඹුරට නොයමු, එහෙත් සරලව මෙම වරද ඉක්මවා යාමට අපට උදවු කරන React hook එකක් වන useRef භාවිතා කරමු.

අපි අපගේ නිෂ්පාදිත යෙදුම විවෘත කර, එහි ProductsList.jsx ගොනුව විවෘත කරමු. එයට useRef hook එක ආයාත (import) කරමු:

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])

දැන් අපගේ යෙදුම නැවත දියත් කර, කොන්සෝලයේ රතු අනතුරු ඇඟවීම් (warnings) අතුරුදහන් වීම සහ අනුපිටපත් නොමැතිව නිෂ්පාදිත ලැයිස්තුව දැකීම සනසා ගනිමු. දැන් ඒවා 8 ක් වේ, අපි සේවාදායකයේ (server) සැලසුම් කළ පරිදිම. දැන් Redux DevTools හි, ඉල්ලීමක් සිදු කිරීමේදී ජනනය වන ක්‍රියා (actions) තවදුරටත් නැවත නැවත සිදු නොවේ.

ඔබගේ ශිෂ්‍ය යෙදුම විවෘත කර, එහි StudentsList.jsx ගොනුව විවෘත කරන්න. පාඩමේ ද්‍රව්‍ය අනුව, ඔබට ඇති නම්, ද්විත්ව ඉල්ලීමේ ගැටලුව තුරන් කරන්න.