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 ၏ နမူနာကို အောက်တွင် ဖော်ပြထားပါသည်။

const 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 လုပ်ထည့်ရန် လိုအပ်သည်။

import { createSlice, nanoid, createAsyncThunk } from '@reduxjs/toolkit'

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

import { client } from '../../api/client'

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

export const fetchProducts = createAsyncThunk()

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

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

သင်၏ ကျောင်းသား (students) များပါသော အက်ပ်လီကေးရှင်းကို ဖွင့်ပါ။ ၎င်းအတွင်း studentsSlice.js ဖိုင်ကို ဖွင့်ပါ။ createAsyncThunk function ကို thunk ဖန်တီးရန် လိုအပ်သလို client ကိုလည်း ၀န်ဆောင်မှုပေးစက် (server) သို့ API တောင်းဆိုချက်များ ပေးပို့ရန် import လုပ်ပါ။

initialState object ကို ကြေညာပြီးသည့်နောက် တန်းလန်း createAsyncThunk ကိုအသုံးပြု၍ thunk fetchStudents ကို ကျောင်းသားစာရင်းရယူရန် ဖန်တီးပါ။ ၎င်းသည် GET-တောင်းဆိုချက် (request) ကို /fakeServer/students လိပ်စာသို့ ပေးပို့မည်ဖြစ်ပြီး သင်၏ server.js ဖိုင်တွင် သတ်မှတ်ထားသကဲ့သို့ဖြစ်ကာ သင်ခန်းစာ၏ ပစ္စည်းများတွင် ပြသထားသည့်အတိုင်း response.data ကို ပြန်ပေးမည်ဖြစ်သည်။ createAsyncThunk အတွက် ပထမဆုံး ပါရာမီတာအနေဖြင့် action အမျိုးအစားအတွက် students/fetchStudents string ကို သတ်မှတ်ပါ။