Redux တွင် GET-request ဖြင့် ဆာဗာမှ ဒေတာများပေးပို့ခြင်း

ဒါကြောင့် ကျွန်ုပ်တို့တွင် ဒေတာအခြေပြု database ရှိပါသည်။ ကျွန်ုပ်တို့၏ Redux application ကို စတင်လည်ပတ်သည့်အခါ ပထမဦးဆုံးလုပ်ရမည်မှာ ဆာဗာမှ ထုတ်ကုန်ဒေတာများရယူရန်ဖြစ်သည်။ ၎င်းအတွက် ကျွန်ုပ်တို့ application မှ GET-request တစ်ခုပေးပို့ရန်လိုအပ်ပါသည်။ ၎င်းကို ဆာဗာအခြမ်းတွင် ကိုင်တွယ်ကြပါစို့။

ထုတ်ကုန်များပါဝင်သော ကျွန်ုပ်တို့၏ application ကို ဖွင့်ပါ၊ ပြီးလျှင် server.js ဖိုင်ကိုဖွင့်ပါ။ HTTP-requests များနှင့် အလုပ်လုပ်ရန် msw မှ ကိရိယာအချို့ကို ဤဖိုင်သို့ တင်သွင်းရန်လိုအပ်ပါသည်၊ ကြပါစို့လုပ်ကြည့်ရအောင်။

import { http, HttpResponse, delay } from 'msw'

ထို့အပြင် စက်ရှုထောင့်အရ၊ ဆိုလိုသည်မှာ ကွန်ရက်တွင် နောက်ကျနိုင်ခြေကို ချက်ချင်းပြင်ဆင်လိုက်ပါ။ ကျွန်ုပ်တို့ ဒေတာများ မည်သို့လာရောက်သည်ကို မြင်နိုင်စေရန် ကျွန်ုပ်တို့၏ လူလုပ်နောက်ကျမှုတန်ဖိုးကို 2 စက္ကန့်ဖြစ်ပါစေ။ const PRODS_PER_SELLER = 2 ၏နောက်တွင် ရေးသားလိုက်ပါ။

const ARTIFICIAL_DELAY_MS = 2000

ယခုတွင် ဖိုင်အဆုံး၌ worker ကို export မလုပ်မီ API request handlers များအတွက် array တစ်ခုကို စတင်လိုက်ပါ။

export const handlers = []

ထို့နောက် စတုရန်းကွင်းစကွင်းပိတ်များအတွင်း၌ ထုတ်ကုန် GET-request အတွက် ပထမဆုံး handler ကို ရေးသားပါမည်။

export const handlers = [http.get()]

http.get အတွက် ပထမ parameter အဖြစ် ဥပမာ '/fakeServer/products' ကဲ့သို့သော အတုအယောင် လိပ်စာတစ်ခုကို ပေးပို့ပါမည်၊ ဒုတိယအနေဖြင့် asynchronous callback ဖြစ်ပါသည်။

export const handlers = [http.get('/fakeServer/products', async () => {})]

ယခုတွင် ထို callback အတွက် ကုဒ်ကိုရေးသားပါမည်။ ၎င်းကို အသုံးပြု၍ database မှ ထုတ်ကုန်အားလုံးကို ထုတ်ယူပါမည်။ ဤနေရာတွင် ကျွန်ုပ်တို့သည် ယခင်သင်ခန်းစာတွင် ရေးသားခဲ့သော serializeProduct function ကိုလည်း အသုံးပြုပါမည်။ ၎င်းကို map သို့ ပေးပို့လိုက်ပါ။ ထို့နောက် (ကွန်ရက်ကနှေးနေသကဲ့သို့) နောက်ကျစေမှုတစ်ခုလုပ်ပြီး response သို့ JSON ပုံစံဖြင့် ထုတ်ကုန်ဒေတာပါဝင်သော objects များကို ပြန်ပို့ပါမည်။

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

နောက်ဆုံးအချက်။ ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ worker အတွက် ပထမဆုံး handler ကို ရေးသားပြီးပြီ၊ ထို worker သို့ handlers array ကို ပေးပို့လိုက်ပါ။ ဤအတွက် ဖိုင်ရှိ နောက်ဆုံးစာကြောင်းကို အောက်ပါအတိုင်းပြင်ဆင်ပါ။

export const worker = setupWorker(...handlers)

သင့်၏ ကျောင်းသားများပါဝင်သော application ကိုဖွင့်ပါ၊ ပြီးလျှင်ထဲရှိ server.js ဖိုင်ကိုဖွင့်ပါ။ msw မှ သတ်မှတ်ထားသော ကိရိယာများကို ဖိုင်သို့ တင်သွင်းပါ။ ဤသင်ခန်းစာ၏အကြောင်းအရာကို လေ့လာပြီးနောက် request များဖမ်းယူရန် handler များအတွက် ဗလာ array တစ်ခုကို ဖန်တီးပါ။ ကျောင်းသား GET-request အတွက် handler ၏ကုဒ်ကို ထဲတွင် ရေးသားပါ။ လမ်းကြောင်းအဖြစ် '/fakeServer/students' ကို သုံးပါ။

ဖိုင်အဆုံး၌ handlers array ကို worker သို့ ပေးပို့ရန် မမေ့ပါနှင့်။