Redux တွင် thunk ကိုအသုံးပြု၍ ဒေတာများပို့ခြင်း

ယခင်သင်ခန်းစာတွင် ကျွန်ုပ်တို့၏ fake server ပေါ်ရှိ POST request ကိုကိုင်တွယ်ခြင်းအကြောင်း လေ့လာခဲ့ကြသည်။ ယခု server သို့ request ပို့ပေးမည့် thunk function တစ်ခုကိုရေးသားကြပါစို့။

ကျွန်ုပ်တို့၏ ထုတ်ကုန်များအက်ပ်ကိုဖွင့်ပါ၊ ၎င်းအတွင်းရှိ productsSlice.js ဖိုင်ကိုလည်းဖွင့်ပါ။ ယခု thunk fetchProducts ပြီးနောက် createAsyncThunk ကိုအသုံးပြု၍ thunk addProduct ကိုဖန်တီးပါမည်။

export const addProduct = createAsyncThunk()

ပထမအကြိမ်သတ်မှတ်ချက်အဖြစ် createAsyncThunk ထဲသို့ 'products/addProduct' ကိုထည့်သွင်းပါ၊ ဒုတိယအကြိမ်သတ်မှတ်ချက်အဖြစ် ထုတ်ကုန်အသစ်၏ ဒေတာများပါဝင်သည့် object ကိုလက်ခံမည့် asynchronous callback function ထည့်သွင်းပါမည်။

export const addProduct = createAsyncThunk(
	'products/addProduct',
	async (newProduct) => {}
)

ဤ callback ၏ကုဒ်ထဲတွင် ကျွန်ုပ်တို့သည် client ခေါ်ဆိုမည်၊ လမ်းကြောင်းနှင့် ထုတ်ကုန်ပါဝင်သည့် object ကိုအကြိမ်သတ်မှတ်ချက်အဖြစ် ပေးမည်၊ ထို့နောက် တုံ့ပြန်ချက်၏ ဒေတာများကို return ပြန်မည်။

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

ယခု အောက်ရှိကုဒ်တွင် productsSlice အတွက် reducers field ကိုကြည့်ရှုပါ။ ယခင်က ကျွန်ုပ်တို့သည် reducer နှင့် prepare method များပါဝင်သည့် reducer productAdded ကိုအသုံးပြု၍ ထုတ်ကုန်အသစ်ထည့်သွင်းခဲ့သည်။ ယခု ကျွန်ုပ်တို့သည် server တွင် လိုအပ်သောဒေတာများကိုထုတ်လုပ်ပြီး thunk နှင့်လုပ်ဆောင်နေသဖြင့် ဤနေရာတွင် reducer productAdded ကို ကုဒ်ထဲမှလုံးဝဖယ်ရှားပါမည်။ ထို့နောက် extraReducers method (၎င်း၏ကုဒ်အဆုံးသို့) ထဲသို့ နောက်ထပ် reducer အပို တစ်ခုထည့်သွင်းပါမည်။ ၎င်းသည် တောင်းဆိုမှုအောင်မြင်ပါက slice products ထဲသို့ action ၏ payload ထဲမှ တိုက်ရိုက်ထုတ်ကုန်အသစ်ထည့်သွင်းပေးမည် (createSlice ၏ တစ်မူထူးခြားမှုကြောင့် ဤသို့ကုဒ်ရေးနိုင်ကြောင်း သတိရပါ)။

.addCase(addProduct.fulfilled, (state, action) => {
	state.products.push(action.payload)
})

ဟုတ်ပါတယ်၊ မှတ်မိစေရန်၊ import စာကြောင်းများမှ nanoid ကိုဖယ်ရှားပါ၊ ဖိုင်အဆုံးရှိ actions export ထဲမှ productAdded ကိုလည်းဖယ်ရှားပါ။

သင်၏ ကျောင်းသားများအက်ပ်ကိုဖွင့်ပါ။ ၎င်းအတွင်းရှိ studentsSlice.js ဖိုင်ကိုဖွင့်ပါ။ createAsyncThunk ကိုအသုံးပြု၍ နောက်ထပ် thunk addStudent တစ်ခုဖန်တီးပါ။ ၎င်းသည် သင်ခန်းစာတွင်ပြသထားသည့်အတိုင်း ကျောင်းသားအသစ်ထည့်သွင်းရန် server သို့ POST request ပို့ပေးမည်ဖြစ်သည်။

ထို့နောက် အောက်တွင် studentsSlice အတွက် ပြောင်းလဲမှုများပြုလုပ်ပါ။ reducers property အတွင်းရှိ reducer studentAdded ကို လုံးဝဖယ်ရှားပါ။ extraReducers field ထဲသို့ နောက်ထပ် reducer အပိုတစ်ခုထည့်သွင်းပါ။ ၎င်းသည် သင်ခန်းစာတွင်ပြသထားသည့်အတိုင်း တောင်းဆိုမှုအောင်မြင်ပါက slice students ထဲသို့ action ၏ payload မှ ကျောင်းသားအသစ်ကိုထည့်သွင်းပေးမည်။