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 слайсине action'дун payload'инен түздөн-түз жаңы продуктту кошот (эсибизде болсун, мындай код уникалдуу createSlice'тин аркасында гана мүмкүн):

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

Ооба, кстати, импорт саптарынан nanoid'ди, файлдын аягындагы экшендерди экспорттоодон болсо productAdded'ти алып салууну унутпаңыз.

Студенттер колдонмосуңузду ачыңыз. Анын ичиндеги studentsSlice.js файлын ачыңыз. createAsyncThunk'тун жардамы менен дагы бир addStudent thunk'ын түзүңүз, ал сабакта көрсөтүлгөндөй, жаңы студентти кошуу үчүн серверге POST-суроо жөнөтсүн.

Андан кийин төмөн studentsSlice үчүн өзгөртүүлөрдү киргизиңиз: reducers касиетиндеги studentAdded редьюсерин толугу менен алып салыңыз. extraReducers талаасына кошумча редьюсерди кошуңуз, ал ийгиликтүү суроо учурунда, сабакта көрсөтүлгөндөй, students слайсине жаңы студентти экшендин payload'инен кошсун.