Redux တွင် တောင်းဆိုမှု ထပ်ခါထပ်ခါ ဖြစ်ခြင်းကို ဖြေရှင်းခြင်း

အကယ်၍ application ကို စတင်သည့်အခါ အချက်အလက်များ တောင်းဆိုမှု နှစ်ကြိမ် ပေးပို့နေပြီး၊ ထို့နောက် id တူညီသော ထုတ်ကုန်စုံများ ရောက်ရှိလာကာ၊ အကျိုးဆက်အနေဖြင့် browser console ထဲတွင် အရောင် အနီရောင် သတိပေးချက်များ ပေါ်လာပါက ဤသင်ခန်းစာသည် ကျွန်ုပ်တို့အတွက် အသုံးဝင်ပါမည်။

၎င်း၏ အကြောင်းရင်းမှာ React 18 နှင့် အထက် ဗားရှင်းများတွင် ဖွံ့ဖြိုးမှုမုဒ် (dev) ၌ React.StrictMode ကို အသုံးပြုသည့်အခါ (production mode တွင် ဒီပြဿနာ မရှိဟု ဆိုကြသည်) component များ တပ်ဆင်ခြင်း၏ ထူးခြားချက်ကြောင့် ဖြစ်သည်။ ပထမဦးစွာ component သည် ချိတ်ဆက်သည်၊ ထို့နောက် ချိတ်ဆက်မှု ဖြုတ်ပြီး နောက်တစ်ကြိမ် ထပ်မံ ချိတ်ဆက်သည်။ ထို့ကြောင့် တောင်းဆိုမှုသည် နှစ်ကြိမ် ပေးပို့ခြင်း ဖြစ်ပေါ်သည်။

�င် ဤသင်ခန်းစာကို လေ့လာနေချိန်တွင် React ထဲက ဤနှစ်ကြိမ် တပ်ဆင်ခြင်းကို တစ်နည်းနည်းဖြင့် ပြောင်းလဲထားပြီး ဖြစ်ကောင်း ဖြစ်နိုင်ပါသည်။ ကျွန်ုပ်တို့သည် နက်ရှိုင်းစွာ မဝင်ရောက်ဘဲ၊ ဤမလိုလားအပ်သော အခြေအနေကို ကျော်လွှားရန် ကူညီပေးမည့် React hook ဖြစ်သော useRef ကို အသုံးပြုပါမည်။

ယခု ကျွန်ုပ်တို့၏ ထုတ်ကုန်များ ပါဝင်သော application ကို ဖွင့်ပါ၊ ထို့နောက် ၎င်းအတွင်းရှိ ProductsList.jsx ဖိုင်ကို ဖွင့်ပါ။ ၎င်းထဲသို့ hook useRef ကို import လုပ်ပါမည်။

import { useEffect, useRef } from 'react'

ယခု useEffect နှင့်အတူ အောက်ပါ code block ကို အနည်းငယ် ပြင်ဆင်ပါမည်။

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

ပထမဦးစွာ useRef အတွက် အသစ်ဖြစ်သော variable dataFetch ကို သတ်မှတ်ပါမည်။ ၎င်း၏ property current ကို အစမှာ false သတ်မှတ်ပါမည်။ အကယ်၍ application သည် စတင်ပြီးဖြစ်ပြီး၊ သင့်လျော်စွာ တောင်းဆိုမှုကို ပေးပို့ပြီးဖြစ်ပါက၊ property current သည် true ဖြစ်နေပြီး၊ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့သည် function မှ ထွက်ခွာပြီး အချက်အလက်များကို ထပ်မံ တောင်းဆိုခြင်း မဖြစ်ပေါ်တော့ပါ။ ထို့ကြောင့် အထက်ဖော်ပြပါ code အပိုင်းအစသည် ယခုအခါ အောက်ပါအတိုင်း ဖြစ်လာပါမည်။

const dataFetch = useRef(false)

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

ယခု ကျွန်ုပ်တို့၏ application ကို ထပ်မံ စတင်ပါ။ console ထဲက အရောင် အနီရောင် သတိပေးချက်များ ပျောက်ကွယ်သွားခြင်းကို သတိပြုမိပြီး၊ server တွင် ကျွန်ုပ်တို့ စီစဉ်ထားသည့်အတိုင်း ယခု ထုတ်ကုန်များ၏ စာရင်းကို အရောင်းစုံမပါဘဲ 8 ခုသာ မြင်တွေ့ရမည် ဖြစ်သည်။ ယခု Redux DevTools ထဲတွင် တောင်းဆိုမှုတစ်ခု ဖြစ်ပေါ်စေသော action များသည် �ပ်မံ မဖြစ်ပေါ်တော့ပါ။

သင်၏ ကျောင်းသားများ ပါဝင်သော application ကို ဖွင့်ပါ။ ထို့နောက် ၎င်းအတွင်းရှိ StudentsList.jsx ဖိုင်ကို ဖွင့်ပါ။ သင်ခန်းစာ၏ သင်ခန်းစာများအရ သင့်တွင် ရှိနေပါက နှစ်ကြိမ် တောင်းဆိုမှု ပြဿနာကို ဖြေရှင်းပါ။