Redux တွင် Component အတွင်း Thunk ၏ အလုပ်လုပ်ချက်များကို ရလဒ်ထုတ်ပြခြင်း

ယခင်သင်ခန်းစာတွင် thunk addProduct ကို အသုံးပြု၍ POST-request ကို ပေးပို့ခဲ့ပါသည်။ ယခု ၎င်း၏အလုပ်လုပ်ချက်များကို component အတွင်း ပြသကြပါစို့။

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များနှင့်အတူ application ကိုဖွင့်ပါ၊ ထို့အပြင် ၎င်းအတွင်း ဖိုင် NewProductForm.jsx ကိုဖွင့်ပါ၊ အဘယ်ကြောင့်ဆိုသော် ဤ component သည် အသစ်သော ထုတ်ကုန်ထည့်သွင်းခြင်းအတွက် တာဝန်ရှိပါသည်။ Import လုပ်သည့်စာကြောင်းများကို ကြည့်ပါ။ Action productAdded ကို import လုပ်ခြင်းကို thunk addProduct ကို import လုပ်ခြင်းဖြင့် အစားထိုးပါမည်။

products/NewProductForm.jsximport { addProduct } from './productsSlice'

ယခု၊ ကျွန်ုပ်တို့သည် slice အတွင်း request ၏ status 'pending' ကို ခြေရာမခံသောကြောင့် အသုံးပြုသူသည် ထုတ်ကုန်ကို သိမ်းဆည်းသည့်ခလုတ်ကို တစ်ကြိမ်သာ နှိပ်နိုင်အောင် လုပ်ဆောင်ကြပါစို့၊ အဘယ်ကြောင့်ဆိုသော် တူညီသောထပ်ခါထပ်ခါ request များကို ကျွန်ုပ်တို့ မလိုအပ်ပါ။ ဤအတွက် local state တစ်ခုကို ထပ်မံဖန်တီးပါမည်။

products/NewProductForm.jsxconst [requestStatus, setRequestStatus] = useState('idle')

ထို့နောက် handler များနှင့် onSaveProductClick function မတိုင်မီ ကျွန်ုပ်တို့ form ၏ field အားလုံး ဖြည့်စွက်ထားခြင်း ရှိ/မရှိ နှင့် request status သည် 'idle' တွင်ရှိမရှိ စစ်ဆေးမည့် ကုဒ်ကိုရေးပါမည်။

products/NewProductForm.jsxconst canBeSaved =
  [name, desc, price, amount, sellerId].every(Boolean) &&
  requestStatus === 'idle'

ထို့နောက် ကျွန်ုပ်တို့သည် onSaveProductClick အတွက် ကုဒ်ကို ပြုပြင်ပါမည်။ ပထမဦးစွာ ဤသည် asynchronous function တစ်ခုဖြစ်ပြီး ၎င်းသည် အထက်ဖော်ပြပါ သတ်မှတ်ချက်မှန်ကန်ပါက လုပ်ဆောင်ပါလိမ့်မည်။

products/NewProductForm.jsxconst onSaveProductClick = async () => {
  if (canBeSaved) {}
}

ကျွန်ုပ်တို့သည် slice အတွင်း status 'rejected' ကို ခြေရာမခံသော်လည်း console အတွင်း error ကို ပြသရန် ဆက်လက်လုပ်ဆောင်နိုင်ပါသည်၊ ဤအတွက် try-catch တည်ဆောက်ပုံကို အသုံးပြုပါမည်။ ထို့အပြင် ဤနေရာတွင် ကျွန်ုပ်တို့သည် request လုပ်ဆောင်ပြီးနောက် local state ကို ထပ်မံသတ်မှတ်ရန် finally ကိုလည်း ထည့်သွင်းပါမည်။

products/NewProductForm.jsxconst onSaveProductClick = async () => {
  if (canBeSaved) {
    try {
    } catch (err) {
      console.error(save product error: , err)
    } finally {
      setRequestStatus('idle')
    }
  }
}

catch နှင့် finally block များနှင့် ကျွန်ုပ်တို့ ကိုင်တွယ်ပြီးပါပြီ၊ ကျွန်ုပ်တို့သည် try block အတွက် ကုဒ်ကို ရေးကြပါစို့။ ဤနေရာတွင် thunk ၏လုပ်ဆောင်ချက်၏ရလဒ်အဖြစ် မည်သည့် response မျှ ပြန်မရောက်မီ local status ကို 'in pogress' အဖြစ် သတ်မှတ်ပါမည်။ ထို့နောက် ကျွန်ုပ်တို့၏ thunk addProduct ကို ပေးပို့ပါမည်။ အသုံးပြုရန် တည်ဆောက်ပုံ try-catch သည် response ၏အမျိုးအစားပေါ် မူတည်၍ RTK function unwrap သည် ကျွန်ုပ်တို့ကို ကူညီပါလိမ့်မည်။ ထို့နောက် request အောင်မြင်ပါက ကျွန်ုပ်တို့သည် local state များကို ၎င်းတို့၏ မူလအနေအထားသို့ ပြန်လည်သတ်မှတ်ပါမည်။ onSaveProductClick အတွက် ပြည့်စုံသောကုဒ်သည် အောက်ပါအတိုင်းဖြစ်ပါမည်။

products/NewProductForm.jsxconst onSaveProductClick = async () => {
  if (canBeSaved) {
    try {
      setRequestStatus('in progress')
      await dispatch(
        addProduct({ name, desc, price, amount, seller: sellerId })).unwrap()
      setName('')
      setDesc('')
      setPrice(0)
      setAmount(0)
      setSellerId('')
    } catch (err) {
      console.error('save product error: ', err)
    } finally {
      setRequestStatus('idle')
    }
  }
}

ကျွန်ုပ်တို့၏ application ကို စတင်ပြီး အသစ်သော ထုတ်ကုန်တစ်ခုကို ထည့်သွင်းရန် ကြိုးစားကြည့်ပါ။ သင်မြင်တွေ့ရသည့်အတိုင်း request အောင်မြင်ပါက field များကို ရှင်းလင်းပြီး အသစ်သော ထုတ်ကုန်ကို ထုတ်ကုန်စာရင်းတွင် ထည့်သွင်းပါမည်။ ထို့အပြင် browser အတွင်း Redux DevTools ကိုလည်း ဝင်ရောက်ကြည့်ရှုပါ၊ ၎င်း၏ tab များကြားတွင် သွားလာပြီး action များနှင့် သင့် state မည်သို့ပြောင်းလဲသည်ကို ကြည့်ရှုပါ။