Redux ရှိ Thunk ကို အသုံးပြု၍ ပေးပို့သည့် POST တောင်းဆိုချက်ကို ကိုင်တွယ်ခြင်း

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

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

ဆာဗာဖက်မှ စတင်ကြပါစို့။ ဤနေရာတွင် GET တောင်းဆိုချက်ကို မဟုတ်တော့ဘဲ POST တောင်းဆိုချက်ကို ကိုင်တွယ်ရန် လိုအပ်လာပါသည်၊ အဘယ်ကြောင့်ဆိုသော် ယခုအခါ ဆာဗာသို့ ထုတ်ကုန်၏ ဒေတာများ ရောက်ရှိလာမည်ဖြစ်ပြီး၊ ကျွန်ုပ်တို့သည် ၎င်းတို့ကို ဆာဗာပေါ်တွင် သိမ်းဆည်းမည်ဖြစ်သည်။

ထုတ်ကုန်များပါသည့် ကျွန်ုပ်တို့၏ အက်ပ်လီကေးရှင်းကို ဖွင့်ပါ၊ ၎င်းအတွင်းရှိ ဖိုင်ဖြစ်သည့် server.js ကို ဖွင့်ပါ။ ၎င်းအတွင်းမှ array handlers ကို ရှာပြီး၊ ၎င်းထဲသို့ POST တောင်းဆိုချက်အတွက် နောက်ထပ် handler တစ်ခု ထည့်ပါမည်။ ဤနေရာတွင် ကျွန်ုပ်တို့သည် တောင်းဆိုချက်၏ body ကိုပါ လက်ခံရရှိမည်ဖြစ်သဖြင့် callback အတွင်း request ကို ပေးပို့ရပါမည်:

http.post('/fakeServer/products', async ({ request }) => {})

ယခုအခါ ကျွန်ုပ်တို့၏ callback ၏ ကုဒ်ကို ကျောက်ကွင်းများအတွင်း၌ ရေးသားပါမည်။ အစမှာ တောင်းဆိုချက်၏ဒေတာများကို ထုတ်ယူပြီး အမှားဖြစ်ပါက ဆာဗာမှ ဒေတာများကို မသိမ်းဆည်းနိုင်ကြောင်း အကြောင်းကြားချက်နှင့် အခြေအနေ 500 ကို ပြန်ပို့ပါ:

http.post('/fakeServer/products', async ({ request }) => {
	const data = await request.json()

	if (data.content === 'error') {
		await delay(ARTIFICIAL_DELAY_MS)
		
		return new HttpResponse('server save error', {
			status: 500,
			headers: {
				'Content-Type': 'application/json',
			},
		})
	}
})

ဒေတာများအားလုံး အဆင်ပြေပါက၊ ကျွန်ုပ်တို့သည် ဒေတာဘေ့စ်အတွင်းတွင် တောင်းဆိုချက်နှင့်အတူ ရောက်ရှိလာသော id အရ ရောင်းသူကို ရှာဖွေပြီး၊ ထို ရောင်းသူကို data အတွင်း ထည့်သွင်းမည် (ကျွန်ုပ်တို့၏ ရောင်းသူဒေတာများသည်လည်း ဆာဗာပေါ်တွင် သိမ်းဆည်းထားသည်မဟုတ်လော ;) ):

const seller = db.seller.findFirst({
	where: { id: { equals: data.seller } },
})
data.seller = seller

ထို့နောက် ဒေတာဘေ့စ်အတွင်း ဤထုတ်ကုန်အတွက် တုံ့ပြန်မှုများနှင့် အော့ဗ်ဂျက်တစ်ခု ဖန်တီးပါမည်။ ယခုအခါတွင်၊ ထုတ်ကုန်အတွက် လိုအပ်သော အကွက်အားလုံးရှိသည့်အတွက်၊ ဒေတာဘေ့စ်အတွင်း ထုတ်ကုန်ကိုယ်၌ကို ဖန်တီးပါမည်:

data.reactions = db.reaction.create()
const product = db.product.create(data)

အချိန်အနည်းငယ် နှောင့်နှေးမှု ထားရှိပြီး၊ ကျွန်ုပ်တို့၏ callback အတွက် ကုဒ်၏ နောက်ဆုံးစာကြောင်းတွင် တုံ့ပြန်ချက်အဖြစ် ထုတ်ကုန်ကို ပြန်ပို့ပါ:

await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

ဤနေရာတွင် ကျွန်ုပ်တို့သည် ဆာဗာနှင့်ပတ်သက်၍ လုံးဝပြီးဆုံးသွားပြီဖြစ်ပြီး၊ ထပ်မံ၍ ၎င်းဆီသို့ ပြန်မလာတော့ပါ။

စကားမစပ်၊ အခြားအသုံးဝင်သော အရာတစ်ခု။ စာကြောင်း export const worker = setupWorker(...handlers) ၏ နောက်တွင် အောက်ပါကုဒ်ကို သင်ထည့်နိုင်ပါသည်:

worker.listHandlers().forEach((handler) => {
	console.log(handler.info.header)
})

ယခုအခါတွင် သင်၏ browser console ထဲတွင် handler တစ်ခုချင်းစီ လည်ပတ်မှု၏ ရလဒ်ကို �ြင်တွေ့နိုင်မည်ဖြစ်သည်။

သေချာသည်မှာ ကျွန်ုပ်တို့၏ ဆာဗာသည် အစစ်အမှန်မဟုတ်ပါ၊ browser အတွင်းရှိ စာမျက်နှာကို ကျွန်ုပ်တို့ အတင်းအကျပ် refresh လုပ်ပါက၊ ထုတ်ကုန်အသစ်များနှင့် အော့ဗ်ဂျက်အားလုံး ပျောက်ကွယ်သွားမည်ဖြစ်သည်။

သင်၏ ကျောင်းသားများနှင့်အတူ အက်ပ်လီကေးရှင်းကို ဖွင့်ပါ။ ၎င်းအတွင်းရှိ ဖိုင်ဖြစ်သည့် server.js ကို ဖွင့်ပါ။ array handlers ထဲသို့ POST တောင်းဆိုချက် ကိုင်တွယ်ခြင်းကို ထည့်သွင်းပါ။ ဤတောင်းဆိုချက်၏ body အတွင်း သင်၏အားဖြင့် ကျောင်းသားအသစ်ထည့်သွင်းထားသော ဒေတာများကို လက်ခံရရှိမည်ဖြစ်သည်။

သင်၏ http.post အတွက် callback ၏ body အတွင်း ဒေတာများကို ဖြေလျော့ပြီး၊ အမှားတစ်ခုဖြစ်ပါက သင့်လျော်သော တုံ့ပြန်ချက်ကို ပေးပို့ပါ။

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

စုစည်းထားသော ဒေတာများအပေါ် အခြေခံ၍ အော့ဗ်ဂျက် student (ကျောင်းသားအသစ်ပါဝင်သော) ကို ဖန်တီးပြီး ဆာဗာ၏ တုံ့ပြန်ချက်အတွင်း ၎င်းကို ပြန်ပို့ပါ။