Redux တွင် Action ပေးပို့ခြင်းနှင့် useDispatch Hook

Redux Application တစ်ခုအလုပ်လုပ်ရန်အတွက် လိုအပ်သော အစိတ်အပိုင်းအားလုံးနီးပါးကို ကျွန်ုပ်တို့အကောင်အထည်ဖော်ပြီးဖြစ်သည်။ React Component မှ Action ပေးပို့ပုံကိုသာ ဆက်လက်လေ့လာရန်လိုပါသေးသည်။ စတင်လိုက်ကြရအောင်။

ကျွန်ုပ်တို့ၑ Product များဆိုင်ရာ Application ကိုဖွင့်ပါ။ NewProductForm Component ရှိ Form ထဲတွင် Product အသစ်၏ဒေတာများကိုသိမ်းဆည်းရန် Button တစ်ခုရှိပါသည်။ ၎င်းကို Click Handler တစ်ခုချိတ်ဆက်ကြပါစို့။ ၎င်းကိုနှိပ်လိုက်သည့်အခါ onSaveProductClick Handler ကိုအလုပ်လုပ်စေပါမည်။

products/NewProductForm.jsx<button type="button" onClick={onSaveProductClick}>
  save
</button>

Product အသစ်တစ်ခုဖန်တီးရာတွင် ယင်းအတွက် ID အသစ်တစ်ခုလိုအပ်ပါမည်။ ကျွန်ုပ်တို့သည် ၎င်းကို လူသိများသော nanoid Library ကို အသုံးပြု၍ ဖန်တီးပါမည်။ မှတ်သားရန်မှာ၊ ၎င်းကို ထည့်သွင်းစရာမလိုပါ။ အဘယ်ကြောင့်ဆိုသော် ၎င်းသည် RTK Package နှင့်အတူ အလိုလိုပါလာပြီးသားဖြစ်သည်။ Import ထဲသို့ nanoid ကိုထည့်ကြပါစို့။

products/NewProductForm.jsximport { nanoid } from '@reduxjs/toolkit'

ထို့အပြင် State ကိုပြောင်းလဲရန်တစ်ခုတည်းသောနည်းလမ်းမှာ Store ထံတွင်ရှိသော dispatch Method ကိုခေါ်၍ Action Object ကိုပေးပို့ရန်ဖြစ်ကြောင်း ကျွန်ုပ်တို့သတိရပါ။ ၎င်း Method ကိုရရှိရန် ကျွန်ုပ်တို့သည် React-Redux Hook ဖြစ်သော useDispatch ကိုအသုံးပြုပါမည်။ ၎င်းကို Import လုပ်ကြပါစို့။

products/NewProductForm.jsximport { useDispatch } from 'react-redux'

NewProductForm Function ၏ Code တွင် ကျွန်ုပ်တို့၏ Local State များအတွက် Constant များကိုဖန်တီးပြီးသည့်နောက် ၎င်းအတွက် dispatch Constant ကိုချက်ချင်းဖန်တီးကြပါစို့။

products/NewProductForm.jsxconst dispatch = useDispatch()

ထို့အပြင် ယခင် သင်ခန်းစာတွင် ကျွန်ုပ်တို့ရရှိခဲ့သော Action Creator ဖြစ်သည့် productAdded ကိုလည်း Import လုပ်ရန်လိုအပ်ပါသည်။

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

ယခု ကျွန်ုပ်တို့သည် onSaveProductClick Handler Function ကို ကိုယ်တိုင်ရေးသားနိုင်ပါပြီ။ ၎င်းကို return Command မတိုင်မီပြုလုပ်ကြပါစို့။

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

Function အတွင်း၌ ကျွန်ုပ်တို့သည် dispatch ကိုခေါ်ပါမည်၊ Action Object ကိုဖန်တီးပါမည်၊ ၎င်း၏ payload Property ထဲသို့ ကျွန်ုပ်တို့သည် ဖန်တီးထားသော ID၊ အမည်၊ ဖော်ပြချက်၊ ဈေးနှုန်းနှင့် Product ၏ပမာဏတို့ကိုထည့်ပါမည်။ ဤဒေတာအားလုံးကို ကျွန်ုပ်တို့သည် Local State များမှယူပါမည်။ ဤသို့ပြုလုပ်ရာတွင် အစတွင် Field အားလုံးဖြည့်ပြီးပြီလားဆိုတာကို အခြေအနေတစ်ခုအတွင်းစစ်ဆေးပါမည် - ဤအခြေအနေတွင်သာ dispatch ကိုခေါ်ပါမည်။ Function Code ၏အဆုံးတွင် ကျွန်ုပ်တို့သည် Local State များကို မူလအနေအထားသို့ပြန်လည်ပေးပါမည်။

products/NewProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productAdded({
        id: nanoid(),
        name,
        desc,
        price,
        amount
      })
    )

    setName('')
    setDesc('')
    setPrice(0)
    setAmount(0)
  }
}

ယခု ကျွန်ုပ်တို့၏ Application ကိုစတင်လိုက်ပါ၊ Form ထဲရှိ Field များထဲသို့ဒေတာများထည့်သွင်းပြီး သိမ်းဆည်းမည့်ခလုတ်ကိုနှိပ်လိုက်ပါ။ ဟူး...၊ စာမျက်နှာအောက်ခြေတွင် Product အသစ်တစ်ခုပေါ်လာပါပြီ။ Redux DevTools ကိုဖွင့်ပြီး ၎င်းအတွင်းရှိ Inspector Tab ကိုဖွင့်ကြည့်လိုက်ပါက ဘယ်ဘက်တွင် @@INIT အပြင် ကျွန်ုပ်တို့၏ Action ဖြစ်သည့် products/productAdded လည်းပေါ်နေသည်ကိုမြင်ရပါမည်။ ညာဘက်အပိုင်းတွင် Action နှင့် State Tab များကိုနှိပ်၍ @@INIT နှင့် products/productAdded ကိုပြောင်းလဲနိုင်ပါသည်။ ယခု ကျွန်ုပ်တို့၏ Product အသစ်ထပ်တိုးလာသည်ကိုမြင်ရပါမည်။ ထို့အပြင် Action Tab တွင်လည်း createSlice ကို အသုံးပြု၍ အလိုလိုဖန်တီးထားသော Action ကိုမြင်ရပါမည် (ဥပမာ Raw ကိုနှိပ်ကြည့်ပါ)။ ဟူး... ကျွန်ုပ်တို့သည် ၎င်းကို ကိုယ်တိုင်ရေးရန်မလိုတော့ပါ။