Redux တွင် ဒေတာများကို တည်းဖြတ်ရန် ဖောင်များ

ယခု ကျွန်ုပ်တို့တွင် store ရှိ ဒေတာများကို ပြောင်းလဲရန် reducer တစ်ခု ရှိပါပြီ။ ဤသင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် ထုတ်ကုန်၏ဒေတာများကို တည်းဖြတ်နိုင်မည့် ဖောင်တစ်ခုကို ဖန်တီးမည်။

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များ app ကို ဖွင့်ပြီး products ဖိုလ်ဒါအတွင်းရှိ ဖိုင် EditProductForm.jsx ကို ဖန်တီးကြပါစို့။ EditProductForm component ကို ဖန်တီးခြင်းသည် NewProductForm နှင့် ဆင်တူပြီး ကျွန်ုပ်တို့ အာရုံစိုက်မည့် ကွာခြားချက်အနည်းငယ်ရှိသည်။ ထို့ကြောင့် NewProductForm.jsx မှ ကုဒ်အားလုံးကို ကူးယူပြီး ဖန်တီးထားသောဖိုင် EditProductForm.jsx ထဲသို့ ထည့်သွင်းပါ။ ယခု အစဉ်လိုက် စတင်ကြပါစို့။

import ထဲမှ nanoid ကို ဖယ်ရှားပါ၊ ဤနေရာတွင် id ကို ထုတ်လုပ်ရန် မလိုအပ်ပါ။ import productAdded ကို productUpdated ဖြင့် အစားထိုးပါ၊ အဘယ်ကြောင့်ဆိုသော် ဤနေရာတွင် ထုတ်ကုန်ထည့်သွင်းခြင်းအတွက် မဟုတ်ဘဲ အပ်ဒိတ်လုပ်ရန် action ကို အသုံးပြုမည် ဖြစ်သည်။

ထို့နောက် ကျွန်ုပ်တို့၏ component ၏ function အမည်ကို NewProductForm မှ EditProductForm သို့ ပြောင်းလဲမည်။

EditProductForm function အတွင်း name, desc, price နှင့် amount အတွက် local state များကို သတ်မှတ်မီ ကုဒ်စာကြောင်းအနည်းငယ်ကို ထပ်မံထည့်သွင်းကြပါစို့။ ယခင်က ဖော်ပြခဲ့သည့်အတိုင်း ဤနေရာတွင် id ကို ထုတ်လုပ်ရန် မလိုအပ်ပါ။ ယခု ကျွန်ုပ်တို့၏ လုပ်ဆောင်ချက်မှာ ပြောင်းလဲမည့်ထုတ်ကုန်၏ ဒေတာများမှ ယင်းကို ရယူရန်ဖြစ်သည်။ ထုတ်ကုန်အတွက် သီးသန့်စာမျက်နှာ ဖန်တီးသည့်အခါ ကျွန်ုပ်တို့ ယခင်က ဤကဲ့သို့ပြုလုပ်ခဲ့ပြီးဖြစ်သည်။ ထို့ကြောင့် hook useParams ကိုအသုံးပြု၍ id ကိုရယူပြီး ထို့နောက် လိုအပ်သောထုတ်ကုန်ကို hook useSelector ကိုအသုံးပြု၍ ရှာဖွေမည် (ဖိုင်၏အစတွင် hook နှစ်ခုလုံးကို import လုပ်ရန် မမေ့ပါနှင့်)။

products/EditProductForm.jsxlet params = useParams()
const { productId } = params

const product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

ထို့နောက် local state ကြေငြာခြင်း ဘလောက်ကို ပြောင်းလဲမည်။ ယခု ကျွန်ုပ်တို့သည် စတင်တန်ဖိုးအဖြစ် store မှရရှိသော ထုတ်ကုန်၏ဒေတာများကို သတ်မှတ်ပေးရန် လိုအပ်သည်။ ပထမဆုံး state သည် ဤကဲ့သို့ပုံစံရှိမည်၊ ကျန်သောသုံးခုကို ကိုယ်တိုင် ပြန်လည်ပြင်ဆင်ပါ။

products/EditProductForm.jsxconst [name, setName] = useState(product.name)

useDispatch အတွက် variable သတ်မှတ်ပြီးနောက် ဤအကြိမ်တွင် hook useNavigate အတွက် ကုဒ်စာကြောင်းတစ်ကြောင်း ထပ်မံထည့်သွင်းကြပါစို့။ အသုံးပြုသူက ဖောင်အတွင်း ပြောင်းလဲမှုများကို သိမ်းဆည်းသောအခါ ထုတ်ကုန်စာမျက်နှာသို့ ပြန်လည်ရောက်ရှိရန် ကျွန်ုပ်တို့ ၎င်းကို အသုံးပြုမည်။

products/EditProductForm.jsxconst navigate = useNavigate()

ထို့အပြင် ဤ hook ကို ဖိုင်၏အစတွင် import လုပ်ပါ။

products/EditProductForm.jsximport { useNavigate, useParams } from 'react-router-dom'

ထို့နောက် ကျွန်ုပ်တို့တွင် input fields များအတွက် ကိုင်တွယ်မည့်အရာများ (handlers) ရှိသည်။ ၎င်းတို့ပြီးနောက် onSaveProductClick function ကို ပြင်ဆင်ရန် လိုအပ်သည်။ ယခုအခါ ၎င်းအတွင်း click လုပ်သောအခါ ကျွန်ုပ်တို့သည် ရရှိထားသော id နှင့် object ပုံစံဖြင့်ပြောင်းလဲထားသော ဒေတာများဖြင့် action productUpdated ကို ပို့မည်။ ထို့နောက် ပြောင်းလဲထားသောထုတ်ကုန်၏ စာမျက်နှာသို့ သွားရောက်ရန် ကျွန်ုပ်တို့၏ navigate ကို ထည့်သွင်းမည်။

products/EditProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productUpdated({
        id: productId,
        name,
        desc,
        price,
        amount,
      })
    );
    
    navigate(`/products/${productId}`);
  }
}

ကျွန်ုပ်တို့ return ပြန်သည့် markup တွင် ဤစာကြောင်းကို ရှာဖွေရန်သာ လိုအပ်ပါတော့သည်။

products/EditProductForm.jsx<h2>Add a New Product</h2>

ပြီးလျှင် ၎င်းကို ဤကဲ့သို့ အစားထိုးပါ။

products/EditProductForm.jsx<h2>Edit Product</h2>