Деректерді Redux-та thunk арқылы жіберу

Алдыңғы сабақта біз жалған серверімізде POST-сұранысты өңдеуді қарастырдық. Енді серверге сұраныс жіберетін thunk-функциясын жазайық.

Өнімдеріміз бар қолданбамызды ашып, оның ішіндегі productsSlice.js файлын ашайық. Енді fetchProducts thunk-інен кейін біз createAsyncThunk көмегімен addProduct thunk-ін жасаймыз:

export const addProduct = createAsyncThunk()

Бірінші параметр ретінде біз createAsyncThunk-ке 'products/addProduct' береміз, ал екіншісі ретінде жаңа өнім деректерінің объектісін қабылдайтын асинхронды колбек береміз:

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

Осы колбектің кодында біз клиентті шақырып, оған жол мен өнім объектісін параметрлер ретінде беріп, содан кейін жауап деректерін қайтарамыз:

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

Енді төменде productsSlice үшін reducers өрісін қарайық. Бұрын біз productAdded редьюсерінің көмегімен жаңа өнімді қосқан болатынбыз, онда бізде reducer және prepare әдістері болды. Енді біз қажетті деректерді серверде жасап шығарып, thunk-пен жұмыс істейміз, сондықтан біз мұнда productAdded редьюсерін кодтан толығымен алып тастаймыз. Содан кейін extraReducers әдісіне (оның кодының соңына) тағы бір қосымша редьюсерді енгіземіз, ол сұраныс сәтті болған жағдайда products слайсына жаңа өнімді тікелей әрекеттің payload-інен қосады (біз мұндай кодтың тек бірегей createSlice арқасында ғана мүмкін екенін еске аламыз):

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

Ия, айтпақшы, импорт жолдарынан nanoid-ті және файл соңындағы экшендерді экспорттаудан productAdded-ті алып тастауды ұмытпаңыз.

Студенттеріңіз бар қолданбаңызды ашыңыз. Оның ішіндегі studentsSlice.js файлын ашыңыз. createAsyncThunk көмегімен тағы бір addStudent thunk-ін жасаңыз, ол сабақта көрсетілгендей, жаңа студентті қосу үшін POST-сұраныс жібереді.

Содан кейін төменде studentsSlice үшін өзгерістер енгізіңіз: reducers қасиетіндегі studentAdded редьюсерін толығымен алып тастаңыз. Ал extraReducers өрісіне сабақта көрсетілгендей, сұраныс сәтті болған жағдайда әрекеттің payload-інен students слайсына жаңа студентті қосатын қосымша редьюсерді қосыңыз.