Redux ရှိ Reducer နှင့် Action

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

အစဦးအနေဖြင့် ကျွန်ုပ်တို့၏ ထုတ်ကုန်များအက်ပ်လီကေးရှင်းတွင် ဖိုင် productsSlice.jsx ကိုဖွင့်ပြီး createSlice⁅/c‌⁆ အတွက် reducer property တွင် productAdded function ကိုရေးပါမည်။ ထို function သည် ထည့်ပေးလိုက်သော လက်ရှိ state နှင့် action အပေါ်အခြေခံကာ store ထဲသို့ ထုတ်ကုန်အသစ်ထည့်သွင်းခြင်းကို လုပ်ဆောင်ပေးမည်။ ဤနေရာတွင် state တစ်ခုလုံးမပေးဘဲ ထုတ်ကုန်များအတွက်သာ တာဝန်ရှိသော အပိုင်း (products slice သည် ၎င်းအပိုင်းကိုသာ သိရှိသည်) ကိုသာ လက်ခံရရှိသည်ကို သတိပြုရန် လိုပါသည်။ ထုတ်ကုန်အသစ်ပါဝင်သော object သည် ဖောင်ထဲရှိ သိမ်းဆည်းရန် ခလုတ်ကိုနှိပ်သည့်အခါ handler ကထုတ်ပေးမည့် object action ၏ property payload အတွင်းတွင် ရှိပါလိမ့်မည်။ ရလဒ်အနေဖြင့် productAdded reducer သည် createSlice code အတွင်း ဤသို့ပုံစံဖြင့် ပေါ်လာပါမည်:



	const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {
		productAdded(state, action) {
			state.push(action.payload)
		},
	},
})


	Action အကြောင်းကော? သင်ရှင်းလင်းချက်၏ အစောပိုင်းတွင်
	ကျွန်ုပ်တို့သည် action ဆိုသည်မှာ အက်ပ်လီကေးရှင်းထဲတွင်
	ဖြစ်ပျက်ခဲ့သည်ကိုဖော်ပြသော object တစ်ခုအနေဖြင့်
	ကိုယ်စားပြုသည့် event တစ်ခုဖြစ်ကြောင်း ဖော်ပြခဲ့သည်။
	ထိုသို့သော object ကိုဖန်တီးပေးမည့် action
	creator function ကိုလည်း အသုံးပြုနိုင်ကြောင်း
	ကျွန်ုပ်တို့ပြောခဲ့သည်၊ ဥပမာအားဖြင့် ဤသို့ဖြစ်သည်:


	const addProduct = newProduct => {
	return {
		type: 'products/productAdded',
		payload: newProduct
	}
}


	သတင်းကောင်းမှာ ကျွန်ုပ်တို့အနေဖြင့် ဘာမှလုပ်စရာမလိုတော့ဘဲ
	ကျွန်ုပ်တို့အသုံးပြုနေသော function createSlice က
	ထိုအလုပ်ကို ကျွန်ုပ်တို့အတွက် လုပ်ဆောင်ပေးသွားမည်ဖြစ်သည်။
	ကျွန်ုပ်တို့ reducer ကိုရေးပြီးသည်နှင့် ၎င်းသည် အလိုအလျောက်
	အလားတူနာမည်ဖြင့် action creator တစ်ခုကို ဖန်တီးပေးပါလိမ့်မည်။
	ကျွန်ုပ်တို့လုပ်ရန်ကျန်သည်မှာ ရရှိလာသော action
	creator ကိ် component များတွင်နောက်ထပ်အသုံးပြုနိုင်ရန်
	export လုပ်ရန်ဖြစ်သည်။ ဖိုင်အဆုံးတွင် reducer ကို export မလုပ်မီ
	ဤသို့လုပ်ဆောင်ကြပါစို့:


	export const { productAdded } = productsSlice.actions
export default productsSlice.reducer


	
		သင်၏ ကျောင်းသားများအက်ပ်လီကေးရှင်းကိုဖွင့်ပါ၊
		ထို့နောက် ဖိုင် studentsSlice.jsx⁅/p‌⁆ ကိုဖွင့်ပြီး
		သင်ခန်းစာတွင်ပြထားသည့်အတိုင်း createSlice အတွက်
		field reducer ၏တန်ဖိုးကို ဖြည့်စွက်ပါ။
	



	
		ဖိုင် studentsSlice.jsx ၏အဆုံးတွင်
		ရရှိလာသော function action creator ကို export လုပ်ပါ။