Ma'lumotlarni Redux-da thunk orqali yuborish

O'tgan darsda bizda POST-so'rovini qayta ishlash o'rganildi. Keling, endi serverga so'rov yuboradigan thunk-funksiyani yozaylik.

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

export const addProduct = createAsyncThunk()

Birinchi parametr sifatida biz createAsyncThunk ga 'products/addProduct' ni, ikkinchi parametr sifatida esa yangi mahsulot ma'lumotlari bilan ob'ektni qabul qiladigan asinkron callback ni uzatamiz:

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

Ushbu callback kodida biz clientni chaqiramiz, unga yo'l va mahsulot bilan ob'ektni parametr sifatida uzatamiz, keyin esa 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 erdan productAdded reducerini butunlay olib tashlaymiz. Keyin extraReducers metodiga (uning kodi oxiriga) yana bir qo'shimcha reducer qo'shamiz, u muvaffaqiyatli so'rov holatida products slaysiga yangі mahsulotni to'g'ridan-to'g'ri payload dan (esda tutamiz, bunday kod faqatgina createSlice tufayli mumkin):

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

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

Talabalar bilan ilovangizni oching. Undagi studentsSlice.js faylini oching. createAsyncThunk yordamida yana bir addStudent thunk ni yarating, u yangi talaba qo'shish uchun serverga POST-so'rov yuboradi, darsda ko'rsatilganidek.

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