Ma'lumotlarni Redux-da thunk orqali yuborish

Oldingi darsda bizning soxta serverimizda POST-so'rovini qayta ishlashni o'rgandik. Keling endi serverga so'rov yuboradigan thunk-funksiyani yozamiz.

Mahsulotlar bilan ishlaydigan ilovamizni ochamiz, va unda productsSlice.js faylini ochamiz. Endi fetchProducts thunk dan keyin createAsyncThunk yordamida addProduct thunk ni yaratamiz:

export const addProduct = createAsyncThunk()

createAsyncThunk ga birinchi parametr sifatida 'products/addProduct' ni, ikkinchi parametr sifatida esa yangi mahsulot ma'lumotlari obyektini qabul qiladigan asinkron callback ni o'tkazamiz:

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

Ushbu callback kodida biz clientni chaqiramiz, unga yo'l va mahsulot obyektini parametr sifatida o'tkazamiz, so'ngra javob ma'lumotlarini qaytaramiz:

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

Endi pastroqda productsSlice uchun reducers maydoniga qaraymiz. Avval biz productAdded reduceri yordamida yangi mahsulot qo'shgan edik, unda reducer va prepare metodlari bor edi. Endi biz kerakli ma'lumotlarni serverda generatsiya qilamiz va thunk bilan ishlaymiz, shuning uchun bu yerdan productAdded reducerini butunlay olib tashlaymiz. So'ngra extraReducers metodiga (uning kodining oxiriga) yana bir qo'shimcha reducer qo'shamiz, bu muvaffaqiyatli so'rov holatida products slaysiga yang i mahsulotni to'g'ridan-to'g'ri action ning payload dan qo'shadi (createSlice ning noyob imkoniyati tufayli bunday kod mumkinligini eslaymiz):

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

Ha, aytgancha, import qatorlaridan nanoid ni olib tashlashni unutmang, va fayl oxiridagi actionlarni eksport qilishdan productAdded ni olib tashlang.

Talabalar bilan ishlaydigan ilovangizni oching. Undagi studentsSlice.js faylini oching. createAsyncThunk yordamida yana bir addStudent thunk ni yarating, u darsda ko'rsatilgandek serverga POST-so'rov yuborib yangi talaba qo'shadi.

Keyin pastroqda studentsSlice uchun o'zgartirishlar kiriting: reducers xususiyatidagi studentAdded reducerini butunlay olib tashlang. extraReducers maydoniga esa darsda ko'rsatilgandek qo'shimcha reducer qo'shing, u muvaffaqiyatli so'rov holatida students slaysiga yangi talabani action ning payload dan qo'shadi.