Redux တွင် Server-Side အတွက် msw ကို တပ်ဆင်ခြင်း

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

အစစ်အမှန် server မရှိသောကြောင့် Mock Service Worker ဟုခေါ်သော ကိရိယာတစ်ခုကို အသုံးပြု၍ ၎င်း၏ လုပ်ဆောင်ချက်ကို အတုယူပြသသွားပါမည်။ Mock Service Worker (MSW) သည် ကွန်ရက်အဆင့်တွင် တောင်းဆိုမှုများကို ဖမ်းယူရန် ရည်ရွယ်ထားသော စံသတ်မှတ်ထားသည့် Service Worker API ကို အသုံးပြုသည့် API အတုယူရန် ကိရိယာတစ်ခုဖြစ်သည်။ MSW သည် ကျွန်ုပ်တို့၏ တောင်းဆိုမှုများ (requests) အတွက် အတုတုန်ဖြေကြားချက်များ (responses) ကို ထုတ်လုပ်ပေးပါလိမ့်မည်။ ထို့အပြင်၊ ထုတ်လုပ်သူများ၏ပြောကြားချက်အရ၊ ဤကိရိယာသည် အလွန်ထိရောက်ပြီး ပြောင်းလွယ်ပြင်လွယ်ရှိသဖြင့် (Application ထဲတွင် အထူးတစ်ခုခု ဖန်တီးစရာမလိုပါ) mocks များဖြင့် စမ်းသပ်ပြီးနောက်၊ Application ကို အစစ်အမှန် အပြင်ဘက် server နှင့်အတူ အလုပ်လုပ်စေနိုင်သည်။ ၎င်း၏ အသေးစိတ်လမ်းညွှန်စာရွက်စာတမ်းသည် ကျယ်ပြန့်သောကြောင့်၊ MSW ကို စိတ်ဝင်စားပါက တရားဝင်ဝက်ဘ်ဆိုက်တွင် ဖတ်ရှုနိုင်ပါသည်။

ယခု msw ကို တပ်ဆင်ကြပါစို့။ ထိုသို့ပြုလုပ်ရန် ကျွန်ုပ်တို့၏ ထုတ်ကုန်များ Project ကိုဖွင့်ပြီး terminal ထဲတွင် အောက်ပါအတိုင်း ရိုက်ထည့်ပါမည်:

terminalnpm install msw --save-dev

msw လုပ်ဆောင်နိုင်ရန် mockServiceWorker.js ဖိုင်ကို ဖန်တီးပြီး အများသုံးဖိုင်တွဲတစ်ခုခုသို့ ကူးယူရန် လိုအပ်ပါသည်။ များသောအားဖြင့် public ဖိုင်တွဲဖြစ်ပါသည်။ ကျွန်ုပ်တို့တွင် public ဟူသော ဗလာဖိုင်တွဲရှိပါသည်၊ ထိုနေရာသို့ ကူးယူကြပါစို့။ ထိုသို့ပြုလုပ်ရန် terminal တွင် အောက်ပါ command ကိုရိုက်ထည့်ပြီး public ကိုအသုံးပြုရန် သဘောတူပါ:

terminalnpx msw init public

ယခု public ဖိုင်တွဲထဲသို့ ကြည့်ပါက mockServiceWorker.js ဟုခေါ်သော ထုတ်လုပ်ထားသည့် script ဖိုင်ပေါ်လာပါလိမ့်မည်။ ယခု ကျွန်ုပ်တို့၏ ထုတ်ကုန်များ Application ကိုစတင်ပြီး ဘရောက်ဆာ၏ လိပ်စာတန်းတွင် http://localhost:5173/mockServiceWorker.js ကိုရိုက်ထည့်ပါမည် (ကျွန်ုပ်တို့ Application သည် 5173 port တွင် အလုပ်လုပ်နေပါသည်)။ ဘရောက်ဆာဝင်းဒိုးထဲတွင် mockServiceWorker.js ဖိုင်၏ အကြောင်းအရာများ ပြသထားသည်ကို မြင်ရပါသလား? အားလုံးအဆင်ပြေနေပါပြီ၊ ဆက်လက်လုပ်ဆောင်ပါမည်။

နောက်ထပ် src ဖိုင်တွဲထဲတွင် api ဟုခေါ်သော ဖိုင်တွဲဖန်တီးပြီး အတွင်း၌ server code များကိုရေးသွားမည့် server.js ဟုခေါ်သော ဖိုင်ကို ဖန်တီးပါမည်။ ယခု server.js ဖိုင်ကိုဖွင့်ပြီး tallဆင်ထားသော msw စာကြည့်တိုက်မှ setupWorker function ကို သွင်းယူပါမည်:

src/api/server.jsimport { setupWorker } from 'msw/browser'

အောက်တွင် worker ဟုခေါ်သော variable တစ်ခုကို ဖန်တီးပြီး ၎င်းကို ထုတ်ပေးပါမည်:

src/api/server.jsexport const worker = setupWorker()

ယခု main.jsx ဖိုင်ကိုဖွင့်ပြီး ကျွန်ုပ်တို့၏ worker ကို သွင်းယူပါမည်:

main.jsximport { worker } from './api/server'

ယခု ၎င်းကို ကျွန်ုပ်တို့၏ Application သို့ ချိတ်ဆက်ပါမည်။ ထိုသို့ပြုလုပ်ရန် ကျွန်ုပ်တို့၏ React Application ၏ အမြစ် (root) ဖန်တီးသည့် code ကို function တစ်ခုအတွင်း ထည့်သွင်းပါမည်၊ ၎င်းကို main ဟုခေါ်ဆိုပြီး ပထမဆုံးစာကြောင်းအဖြစ် worker စတင်ရန် function ကို ထည့်သွင်းပါမည်။ မမေ့ပါနှင့် main ကို ခေါ်ဆိုရန် လိုအပ်ပါသည်။ သွင်းယူထားသည့် စာကြောင်းများအားလုံးပြီးနောက် ပြည့်စုံသော code သည် ယခုအောက်ပါအတိုင်း ဖြစ်သွားပါမည်:

main.jsxasync function main() {
  await worker.start({ onUnhandledRequest: 'bypass' })

  ReactDOM.createRoot(document.getElementById('root')).render(
    <React.StrictMode>
      <Provider store={store}>
        <App />
      </Provider>
    </React.StrictMode>
  )
}

main()

ယခု ကျွန်ုပ်တို့ Application သည် worker စတင်ခြင်းမရှိဘဲ (နှင့် တောင်းဆိုမှုများမပို့ဘဲ ;) ) စတင်အလုပ်လုပ်မည်မဟုတ်ကြောင်း သေချာပါသည်။

ကျွန်ုပ်တို့ Application ကိုစတင်ပြီး ဘရောက်ဆာထဲတွင် Developer Console ကိုဖွင့်ပါ။ အကယ်၍ ၎င်းထဲတွင် '[MSW] Mocking enabled.' စာသားကို သင်မြင်ရပါက၊ သင်သည် ထူးချွန်ပြီး အားလုံးကို မှန်ကန်စွာ တပ်ဆင်ထားပါသည်!!!