Redux တွင် ဖောင်များနှင့် Local State များ

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

Redux ၏ Global State ကို အသုံးပြုရန် အမြဲတမ်း အဓိပ္ပာယ်မရှိသည့်အချက်ဖြင့် စတင်ကြပါစို့။ တစ်ခါတစ်ရံတွင် ကျွန်ုပ်တို့လိုအပ်ချက်များအတွက် Local State များကို ဖန်တီးနိုင်သည်။ Local State ဆိုသည်မှာ နည်းပညာဆိုင်ရာလိုအပ်ချက်များ အတွက် Component တစ်ခုအတွင်း အသုံးပြုသည့် State များကို ခေါ်ဆိုခြင်းဖြစ်သည်။ ဥပမာအားဖြင့်၊ ခလုတ်တစ်ခုနှိပ်ခြင်းဖြင့် တစ်ခုခုကို ဝှက်ရန် သို့မဟုတ် ပြသရန်အတွက် ဖြစ်သည်။

ကျွန်ုပ်တို့၏ ဖြစ်ရပ်တွင် အသုံးပြုသူသည် ဖောင်ထဲသို့ ဒေတာများကို ထည့်သွင်းမည်ဖြစ်ပြီး၊ သဘာဝအားဖြင့် ဤအတွက် State များကို အသုံးပြုရန်လိုအပ်ပါမည်။ Redux ၏ Global State ကို အသုံးပြုနိုင်သော်လည်း၊ ဤသို့လုပ်ဆောင်ရန် အကြောင်းမရှိပါ၊ အဘယ်ကြောင့်ဆိုသော် ကျွန်ုပ်တို့၏ State များသည် ထုတ်ကုန်အသစ်ထည့်သွင်းရန် ဖောင်အတွက် Application တစ်ခုတည်းတွင်သာ အလုပ်လုပ်မည်ဖြစ်သည်။ ဤနည်းဖြင့် လိုက်နာရမည့် အဓိကစည်းမျဉ်းမှာ - Local State များသည် ၎င်းတို့ဖန်တီးထားသည့် Component အပြင်ဘက်တွင် အလုပ်မလုပ်ရန်နှင့် store နှင့် မည်သည့်နည်းနှင့်မျှ သက်ဆိုင်ခြင်းမရှိစေရန်ဖြစ်သည်။ ဤသို့သော လုပ်ထုံးလုပ်နည်းကို ဖောင်များဖန်တီးသည့်အခါ မကြာခဏအသုံးပြုလေ့ရှိသည်။

ယခု ထုတ်ကုန်များပါဝင်သည့် Application ၏ products ဖိုလ်ဒါကိုဖွင့်ပါ၊ ၎င်းအတွင်း NewProductForm.jsx ဖိုင်တစ်ခုကိုဖန်တီးပြီး၊ ၎င်းထဲသို့ useState Hook ကို import လုပ်ပါမည်။

import { useState } from 'react'

ယခု ဖောင်ပါဝင်သည့် Component ကိုယ်တိုင်ကို ဖန်တီးပြီး React တွင် အရင်က လုပ်ခဲ့သကဲ့သို့ သာမန် State များကို ထည့်သွင်းပါမည်။ ထုတ်ကုန်၏ အမည်၊ ဖော်ပြချက်၊ စျေးနှုန်းနှင့် အရေအတွက်အတွက် State များလိုအပ်ပါသည်။

export const NewProductForm = () => {
	const [name, setName] = useState('')
	const [desc, setDesc] = useState('')
	const [price, setPrice] = useState(0)
	const [amount, setAmount] = useState(0)
}

ထို့နောက် အသုံးပြုသူသည် ဒေတာထည့်သွင်းသည့်အခါတိုင်း တစ်ခုချင်းစီအတွက် စံပြုလုပ်ဆောင်ချက်ကို ထည့်သွင်းပါမည်။

const onNameChanged = (e) => setName(e.target.value)
const onDescChanged = (e) => setDesc(e.target.value)
const onPriceChanged = (e) => setPrice(e.target.value)
const onAmountChanged = (e) => setAmount(e.target.value)

ပြီးလျှင် Component အတွင်းသို့ ခေါင်းစဉ်နှင့် ဗလာဖောင် ပါဝင်သည့် markup ကို return ပြန်ပါမည်။

return (
	<div>
		<h2>ထုတ်ကုန်အသစ်တစ်ခုထည့်ရန်</h2>
		<form>
		</form>
	</div>
)

သင်၏ ကျောင်းသားများပါဝင်သည့် Application ကိုဖွင့်ပါ။ students ဖိုလ်ဒါအတွင်း NewStudentForm.jsx ဖိုင်တစ်ခုကိုဖန်တီးပါ။ Component NewStudentForm အတွင်း လိုအပ်သည့် ကွက်လပ်များအတွက် Local State များကို သတ်မှတ်ပြီး၊ သင်ခန်းစာတွင် ပြသထားသည့်အတိုင်း တစ်ခုချင်းစီအတွက် လုပ်ဆောင်ချက်များ ရေးပါ။

Component NewStudentForm အတွင်းသို့ ခေါင်းစဉ်နှင့် ဗလာဖောင် ပါဝင်သည့် markup ကို return ပြန်ပါ။