Redux ဆာဗာအတွက် ဒေတာဘေ့စ်

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

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

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

ဤအရာတွင် ကျွန်ုပ်တို့ကို ကူညီမည့် ကိရိယာမှာ - ၎င်းမှာ @mswjs/data လိုင်ဘရီဖြစ်ပါသည်။ ၎င်းကို ထည့်သွင်းရန်၊ တာမီနယ်ထဲတွင် အောက်ပါ command ကို ရိုက်ထည့်ပါ-

npm install @mswjs/data --save-dev

ယခု ဖိုင် server.js ထဲတွင် လိုအပ်သော အရာများကို import လုပ်ပါမည်-

import { factory, oneOf, manyOf, primaryKey } from '@mswjs/data'

ထို့အပြင် ကျွန်ုပ်တို့၏ ယာယီဒေတာဘေ့စ်ကို ဖန်တီးပါမည်။ ဤအတွက် ကျွန်ုပ်တို့သည် function factory ကို အသုံးပြုပါမည်။ ကျွန်ုပ်တို့သည် ဤအရာကို import စာကြောင်းများအောက်တွင် နှင့် worker ကို export လုပ်သည့် စာကြောင်းများအထက်တွင် လုပ်ပါမည်-

export const db = factory({})

ထို့အပြင် ကျွန်ုပ်တို့သည် ယင်းထဲတွင် မည်သည့် ဒေတာများကို သိမ်းဆည်းမည်နည်း။ ဆာဗာမှ ကျွန်ုပ်တို့သည် ထုတ်ကုန်များ (products)၊ ရောင်းချသူများ (sellers) နှင့် အသုံးပြုသူတုံ့ပြန်ချက်များ (reactions) ကို ရယူသင့်ပါသည်။ ဆိုလိုသည်မှာ ကျွန်ုပ်တို့၏ ဒေတာဘေ့စ်ထဲတွင် ကျွန်ုပ်တို့သည် သုံးခုသော model များကို ဖန်တီးသင့်ပါသည်။ ၎င်းတို့ကို factory သည် object များပုံစံဖြင့် လက်ခံပါသည်-

export const db = factory({
	product: {},
	seller: {},
	reaction: {},
})

တကယ့် SQL ဒေတာဘေ့စ်တစ်ခုကဲ့သို့ပင် ကျွန်ုပ်တို့၏ model တစ်ခုစီတိုင်းတွင် primary key ရှိသင့်ပါသည်။ သမရိုးကျအားဖြင့်၊ ကျွန်ုပ်တို့သည် ထိုကဲ့သို့သော field အဖြစ် id ကို သတ်မှတ်ပါမည်။ ၎င်းကို ထုတ်လုပ်မည့် nanoid လိုင်ဘရီကိုပင် အသုံးပြုပါမည်-

export const db = factory({
	product: {
		id: primaryKey(nanoid),
	},
	seller: {
		id: primaryKey(nanoid),
	},
	reaction: {
		id: primaryKey(nanoid),
	},
})

ဖိုင်အစရှိ အောက်ခြေ import စာကြောင်းများထဲတွင် nanoid ကို ထည့်သွင်းရန် မမေ့ပါနှင့်-

import { nanoid } from '@reduxjs/toolkit'

နောက်လာမည့် သင်ခန်းစာတွင် ကျွန်ုပ်တို့သည် ကျွန်ုပ်တို့၏ model များကို လိုအပ်သော field များဖြင့် ဖြည့်စွက်ပါမည်။

သင်၏ ကျောင်းသားများ အက်ပ်လီကေးရှင်းကို ဖွင့်ပါ။ ဤသင်ခန်းစာ၏ ပစ္စည်းများကို လေ့လာပြီးနောက်၊ သင်၏ အက်ပ်လီကေးရှင်းအတွက် @mswjs/data ကို ထည့်သွင်းပါ။

ထို့နောက် function factory ၏ အကူအညီဖြင့် ဒေတာဘေ့စ် model db ကို ဖန်တီးပါ။ သင့်ဒေတာများအတွက် object သုံးခု (student, teacher, vote) ကို သင်ခန်းစာတွင် ပြထားသည့်အတိုင်း ၎င်းထံသို့ ပေးပို့ပါ။