Redux တွင် Thunks များအား နိဒါန်း

ယခင်အခန်းတွင် ကျွန်ုပ်တို့သည် ဒေတာဖလှယ်ရန် ၀န်ဆောင်မှုပေးစက် (server)၊ ဒေတာအခြေစိုက်စင် (database) နှင့် လက်ခံအသုံးပြုသူ (client) တို့၏ လုပ်ဆောင်ချက်ကို ဖွဲ့စည်းခဲ့ပါသည်။ ယခုအခါတွင် ကျွန်ုပ်တို့၏ 'အချိန်တစ်ပြေးညီ' (synchronous) ဖွဲ့စည်းထားသော Redux အက်ပ်လီကေးရှင်းအား၊ ယခင်အခန်း၏ နောက်ဆုံးသင်ခန်းစာတွင် ဖန်တီးခဲ့သည့် အချိန်ကွဲပြားသည့် လက်ခံအသုံးပြုသူ (client) နှင့် အပြန်အလှန်ဆက်သွယ် လုပ်ကိုင်နိုင်ရန် ကူညီမည့် နောက်ဆုံး တံတားငယ်ကို ဆောက်လုပ်ရန် လိုအပ်ပါသည်။ ဤသို့ဖြင့် တောင်းဆိုချက်များကို ပေးပို့နိုင်ပြီး အဖြေမှ လိုအပ်သောဒေတာများကို ရယူနိုင်မည်ဖြစ်သည်။

ယခင်အပိုင်း၏ ပထမဆုံးသင်ခန်းစာများမှ သတိရသကဲ့သို့ Redux သည် အချိန်ကွဲပြားသည့် ယုတ္တိဗေဒ (asynchronous logic) ဖြင့် လုပ်ကိုင်ခြင်းအကြောင်း မသိရှိပါ။ ထို့ကြောင့် ဤအတွက် ကျွန်ုပ်တို့သည် thunk middleware ကို အသုံးပြုပါမည်။ ဤ middleware သည် ပေးပို့ထားသော actions များနှင့် လုပ်ကိုင်ခွင့်၊ ကျွန်ုပ်တို့၏ thunk ကုဒ်အတွင်း dispatch နှင့် getState method များကို အသုံးပြုခွင့်ပေးပြီး dispatch method အား သာမန် JS objects များသာမက function များနှင့် promise များကဲ့သို့သော အရာများနှင့်ပါ လုပ်ကိုင်ရာတွင်လည်း ကူညီပေးပါသည်။

ပုံမှန်အားဖြင့် thunk- function ကို ပါရာမီတာ (arguments) နှစ်ခု dispatch နှင့် getState (လိုအပ်ပါက) တို့ဖြင့် ခေါ်ယူအသုံးပြုပြီး ၎င်းတို့ကို ဤ function ၏ body အတွင်း အသုံးပြုနိုင်သည်။ ၎င်းဖြင့် ပုံမှန် action များကို ပေးပို့နိုင်သည်။ ထို့ပြင် ၎င်းကို store.dispatch မှတစ်ဆင့်လည်း ပေးပို့နိုင်သည်။ ထိုကဲ့သို့သော function ၏ နမူနာကို အောက်တွင် ဖော်ပြထားပါသည်။

jsxconst changeColorThunk = (dispatch, getState) => {
  const colorBefore = getState()
  console.log(`Old Color: ${colorBefore.color}`)
  
  dispatch(changeColor())
  
  const colorAfter = getState()
  console.log(`New Color: ${colorAfter.color}`)
}

store.dispatch(changeColorThunk)

ယခု ကျွန်ုပ်တို့၏ ထုတ်ကုန် (products) များပါသော အက်ပ်လီကေးရှင်းကို ဖွင့်ကြည့်ကြပါစို့။ အက်ပ်လီကေးရှင်း စတင်လိုက်သည်နှင့် ၀န်ဆောင်မှုပေးစက် (server) ထံမှ ပထမဆုံးရရှိရမည့် အရာမှာ ထုတ်ကုန်စာရင်းဖြစ်သည်။ ပုံမှန်အားဖြင့် thunks များကို slice ဖိုင်များတွင် ရေးသားသောကြောင့် ကျွန်ုပ်တို့သည် productsSlice.js ဖိုင်ကို ဖွင့်ကြည့်ပါမည်။

၀မ်းမြောက်ဖွယ်သတင်းကောင်းမှာ ကျွန်ုပ်တို့သည် Redux Thunk ကို တပ်ဆင်ရန် မလိုအပ်တော့ပါ။ အဘယ့်ကြောင့်ဆိုသော် RTK မှ configureStore function က ကျွန်ုပ်တို့အတွက် ၎င်းကို လုပ်ဆောင်ပြီးဖြစ်နေသည်။ ထို့ကြောင့် ဖိုင်ထဲတွင် createAsyncThunk ကို import လုပ်ထည့်ရန် လိုအပ်သည်။

products/productsSlice.jsimport { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

ကျွန်ုပ်တို့၏ client ကိုလည်း import ထည့်ပါမည်။

products/productsSlice.jsimport { client } from '../../api/client'

ယခု createAsyncThunk ကိုအသုံးပြု၍ ထုတ်ကုန်များရယူရန် ကျွန်ုပ်တို့၏ ပထမဆုံး thunk ကိုဖန်တီးကြပါစို့။ initialState object ကို ကြေညာပြီးသည့်နောက် တန်းလန်း ပြုလုပ်ပါမည်။

products/productsSlice.jsexport const fetchProducts = createAsyncThunk()

createAsyncThunk ၏ ပထမဆုံး ပါရာမီတာအနေဖြင့် ထုတ်လုပ်မည့် action ၏ အမျိုးအစား (type) အတွက် string တစ်ခုကို လက်ခံမည်။ ဒုတိယပါရာမီတာအနေဖြင့် payload အတွက် callback function ကို လက်ခံမည်ဖြစ်ပြီး ၎င်းသည် ရလဒ်အနေဖြင့် ဒေတာများ သို့မဟုတ် အမှား (error) ပါသော promise တစ်ခုကို ပြန်ပေးမည် (client.js ဖိုင်ကို ကြည့်ပါ)။ function အတွင်းရှိ ကုဒ်တွင် ကျွန်ုပ်တို့သည် client.get ကိုခေါ်ယူပြီး ၎င်းထံ ၀န်ဆောင်မှုပေးစက် (server) တွင် ကျွန်ုပ်တို့သတ်မှတ်ထားသော လမ်းကြောင်း (path) ကို ပေးပို့မည် (server.js ရှိ http.get လက်ခံသော ပါရာမီတာများကို ကြည့်ပါ)။

products/productsSlice.jsexport const fetchProducts = createAsyncThunk(
  'products/fetchProducts',
  async () => {
    const response = await client.get('/fakeServer/products')
    return response.data
  }
)