Redux တွင် Component မှ Thunk ပို့ခြင်း

ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် React component ProductsList မှ ထုတ်ကုန်များအား ရယူရန် thunk တစ်ခုပို့ပါမည်။

ယခု ကျွန်ုပ်တို့၏ ထုတ်ကုန်များနှင့် အက်ပ်ကိုဖွင့်ကြည့်ပါ၊ ထိုအတွင်း ProductsList.jsx ဖိုင်ကိုဖွင့်ပါ။ ပထမဦးစွာ ကျွန်ုပ်တို့ ဖန်တီးထားသော thunk fetchProducts အား import လုပ်ရန် ထည့်သွင်းပါမည်။

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

ထို့အပြင် ကျွန်ုပ်တို့၏ action creator ပို့ဆောင်ရန် useDispatch hook နှင့် useEffect hook လိုအပ်ပါမည်၊ အဘယ့်ကြောင့်ဆိုသော် ဤနေရာတွင် ဘေးထွက်အကျိုးသက်ရောက်မှု ရှိသောကြောင့်ဖြစ်သည်၊ ကျွန်ုပ်တို့သည် ကွန်ရက်နှင့်ဆက်သွယ်နေရပြီး ၎င်းသည် ပြင်ပမှ API တစ်ခုဖြစ်သောကြောင့်ဖြစ်သည်။

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

ယခု ProductsList function ၏ ကုဒ်အတွင်း ပထမဆုံးစာကြောင်းတွင် products ကိုကြေညာခြင်းမပြုမီ အောက်ပါအတိုင်း ထည့်သွင်းပါမည်။

const dispatch = useDispatch()

နောက်ထပ် state မှ ထုတ်ကုန်များကိုရယူသည့်အခါ ကျွန်ုပ်တို့သည် တောင်းဆိုချက်၏ အခြေအနေကိုပါ ထုတ်ယူပါမည်။

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

၎င်းနောက်တွင်ပင် useEffect hook ကို အသုံးပြု၍ React အား component ကို render လုပ်ပြီးနောက် ထုတ်ကုန်များကိုရယူရန် လိုအပ်ကြောင်း ပြောပြပါမည်။ ဤနေရာတွင် တောင်းဆိုချက်၏ အခြေအနေကို လိုအပ်ပါသည်၊ အဘယ့်ကြောင့်ဆိုသော် ထိုကဲ့သို့သော တောင်းဆိုချက်ကို တစ်ကြိမ်တည်းသာ ပို့ဆောင်ရန် အရေးကြီးသောကြောင့်ဖြစ်သည်။

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

ယခု ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ အက်ပ်ကိုစတင်နိုင်ပါပြီ၊ ဘယ်ဘက်ရှိ menu ထဲမှ 'Products' ကိုနှိပ်ပါ။ ထုတ်ကုန်များစာရင်းကို ကျွန်ုပ်တို့မမြင်ရသေးသော်လည်း ကျွန်ုပ်တို့၏ Redux DevTools ထဲသို့ဝင်ပါက ဘယ်ဘက်ခြမ်းရှိ ပြတင်းပေါက်ထဲတွင် အလိုအလျောက်ထုတ်လုပ်ထားသော (ယခင်သင်ခန်းစာတွင် ကျွန်ုပ်ပြောခဲ့သကဲ့သို့) actions products/fetchProducts/pending နှင့် fulfilled တို့ ပေါ်လာပါလိမ့်မည်။ ယခု action products/fetchProducts/fulfilled နှင့် ၎င်း၏ payload field ကိုနှိပ်ကြည့်ပါ - ကျွန်ုပ်တို့၏ ထုတ်ကုန်များစာရင်းဖြစ်ပါသည်။ ဟူးရေး၊ ကျွန်ုပ်တို့၏ ကွင်းဆက်အားလုံး - server, database, client နှင့် Redux - application အားလုံးသည် ညီညီညွတ်ညွတ်နှင့် ပူးပေါင်းအလုပ်လုပ်နေပါသည်။ စကားမစပ်၊ ဤနေရာတွင် meta property ကိုလည်းမြင်ရပါသည်၊ ထိုတွင် ကျွန်ုပ်တို့သည် တောင်းဆိုချက်၏ အခြေအနေကိုမြင်နိုင်ပါသည်။

နောက်ထပ်အရာတစ်ခုကို သတိပြုကြည့်ပါ၊ သင့်တွင် pending နှင့် ထို့ကြောင့် fulfilled တို့သည် နှစ်ကြိမ်စီ ပြသခြင်းဖြစ်နိုင်ပါသည်။ အကယ်၍ ထိုသို့ဖြစ်နေပါက စိတ်မပျက်ပါနှင့်၊ ကျွန်ုပ်တို့သည် ထိုအကြောင်းကို နောက်ပိုင်းတွင်ဆွေးနွေးပါမည်။

သင့်ကျောင်းသားများနှင့် အက်ပ်ကိုဖွင့်ပါ။ ထိုအတွင်း StudentsList.jsx ဖိုင်ကိုဖွင့်ပါ။ သင်ခန်းစာမှသင်ယူထားသော အကြောင်းအရာအရ လိုအပ်သော hooks များနှင့် thunk ကို import လုပ်ပါ။

သင်ခန်းစာမှအကြောင်းအရာများကိုလေ့လာပြီး တောင်းဆိုချက်၏ အခြေအနေ studentStatus ကိုရယူပါ၊ ထို့နောက် useEffect ကိုအသုံးပြု၍ studentStatus ၏တန်ဖိုးသည် 'idle' ဖြစ်သည့်အခြေအနေတွင်သာ fetchStudents ကိုပို့ဆောင်ပါ။

သင့်အက်ပ်ကိုစတင်ပါ၊ အက်ပ်၏ဘယ်ဘက်ရှိ menu ထဲမှ 'Students' ကိုနှိပ်ပါ၊ ထို့နောက် browser extension Redux DevTools ကိုစတင်ပါ၊ ဤသင်ခန်းစာတွင်ကဲ့သို့ပင် သင့်အနေဖြင့် actions pending နှင့် fulfilled (ထိုအတွင်း payload တွင် ကျောင်းသားများနှင့်) တို့ကိုမြင်ရပါမည်။ extension ၏ tabs များအတွင်း လှည့်လည်ကြည့်ရှုပါ။