Redux တွင် Action Object အတွက် ဒေတာများကို ပြင်ဆင်ခြင်း

မကြာသေးမီက ကျွန်ုပ်တို့ ဆွေးနွေးခဲ့သည်မှာ function createSlice သည် action.payload ဖန်တီးရာတွင် argument တစ်ခုကိုသာ မျှော်လင့်သည်ဟူ၏။ တစ်ဖက်တွင် ဤသည်က ၎င်း၏အသုံးပြုမှုကို ရိုးရှင်းစေသော်လည်း၊ အခြားတစ်ဖက်တွင် action object ၏ အကြောင်းအရာများကို ပြင်ဆင်ရန် အပိုလုပ်ဆောင်ချက်များ လိုအပ်နိုင်ပါသည်။

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များအက်ပ်ကို ဖွင့်ကြည့်ပါ၊ ထိုအတွင်းရှိ ဖိုင်အမည် NewProductForm.jsx ကို ဖွင့်ပါ။ အောက်ပါကုဒ်လိုင်းကို သတိပြုပါ။

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

ဤနေရာတွင် ကျွန်ုပ်တို့သည် payload object ကို React component အတွင်း တိုက်ရိုက်စုဆောင်းပြီး action productAdded သို့ ထည့်ပေးနေပါသည်။ အလားတူ action ကို component အများအပြားမှ ပို့ရန် လိုအပ်လာပါက သို့မဟုတ် စုဆောင်းရန် logic များ ရှုပ်ထွေးလာပါက ဘာလုပ်မလဲ။ အယူအဆအရ ကျွန်ုပ်တို့၏ component သည် ဤ action အတွက် payload အတွင်းရှိ object ပုံစံကို သိရန် မလိုအပ်သင့်ပါ။ ထို့အပြင် ကုဒ်များကို အဆက်မပြတ် ထပ်တူပြုခြင်းကိုလည်း ကျွန်ုပ်တို့ သဘောမတွေ့ပါ။

ဤပြဿနာများကို ကျွန်ုပ်တို့၏ နာမည်ကြီး createSlice က ထပ်မံကူညီဖြေရှင်းပေးနိုင်ပါသည်၊ အဘယ်ကြောင့်ဆိုသော် reducer ရေးသားရာတွင် ၎င်းသည် callback function prepare ကို အသုံးပြုခွင့်ပေးပြီး၊ �ိုအတွင်း၌ logic အမျိုးမျိုးရေးသားခြင်း၊ ကျပန်းနံပါတ်များ ထုတ်ခြင်းနှင့် အခြားအရာများ ပြုလုပ်နိုင်ပါသည်။ ထိုသို့သောအခြေအနေတွင် reducer field အတွက် တန်ဖိုးကို အောက်ပါ object ပုံစံဖြင့် ကိုယ်စားပြုနိုင်ပါသည်။

{reducer, prepare}

ယခု ကျွန်ုပ်တို့၏ ဖိုင် productsSlice.js ကို ဖွင့်ပါ ပြီးလျှင် reducer productAdded အတွက် ကုဒ်ကို ပြောင်းလဲပါ။ ယခု ကုဒ်၏ ဤအပိုင်းသည်။

productAdded(state, action) {
	state.push(action.payload)
},

ကျွန်ုပ်တို့ အောက်ပါအတိုင်း ပြောင်းလဲမည်၊ ထိုတွင် function reducer သည် store အတွင်း state ကို အပ်ဒိတ်လုပ်ရန် တာဝန်ယူမည်၊ prepare သည် ကျွန်ုပ်တို့၏ အခြားဒေတာများနှင့်အတူ ထုတ်လုပ်ထားသော id ပါသည့် payload object ကို ပြန်ပေးရန် တာဝန်ယူမည်။

productAdded: {
	reducer(state, action) {
		state.push(action.payload)
	},
	prepare(name, desc, price, amount) {
		return {
			payload: {
				id: nanoid(),
				name,
				desc,
				price,
				amount,
			},
		}
	},
},

ယခု ကျွန်ုပ်တို့သည် id ကို component ထဲတွင် မဟုတ်ဘဲ ဤနေရာတွင် ထုတ်လုပ်မည်ဖြစ်သောကြောင့်၊ import ထဲသို့ nanoid ကို ထည့်ကြပါစို့။

import { createSlice, nanoid } from '@reduxjs/toolkit'

နောက်ဆုံးတွင် NewProductForm.jsx အတွင်း ပြောင်းလဲမှုများ ပြုလုပ်ပါ။ အောက်ပါလိုင်းအစား။

dispatch(productAdded({
	id: nanoid(), name, desc, price, amount
}))

ကျွန်ုပ်တို့လိုအပ်သော ဒေတာများကို ကျောက်ချပ်ဖြင့် ပို့ဆောင်ပေးသည့် အောက်ပါလိုင်းကို အသုံးပြုမည် (ဤဖိုင်တွင် import ထဲမှ nanoid ကို ဖယ်ရှားရန် မမေ့ပါနှင့်)။

dispatch(productAdded(name, desc, price, amount))

အက်ပ်ကို စတင်ပါ၊ ထို့နောက် ထုတ်ကုန်အသစ်တစ်ခု ဖန်တီးပြီး ကျွန်ုပ်တို့ ဘာမှ မပျက်စီးကြောင်း သေချာပါစေ။

သင်၏ ကျောင်းသားများအက်ပ်ကို ဖွင့်ပါ။ ဖိုင် StudentsSlice.js ထဲတွင် သင်၏ reducer studentAdded ကို သင်ခန်းစာတွင် ပြထားသည့်အတိုင်း object {reducer, prepare} ပုံစံဖြင့် ပြန်ရေးပါ။

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