Изпращане на данни с помощта на thunk в Redux

В предишния урок се занимавахме с обработката на POST заявка на нашия фалшив сървър. Нека сега напишем thunk функция, която ще изпраща заявка към сървъра.

Нека отворим нашето приложение с продукти, а в него файла productsSlice.js. Сега след thunk fetchProducts ще създадем thunk addProduct с помощта на createAsyncThunk:

export const addProduct = createAsyncThunk()

Като първи параметър ще подадем на createAsyncThunk 'products/addProduct', а като втори асинхронен callback, който ще приема обект с данни за нов продукт:

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

В кода на този callback ще извикаме клиента, като му подадем като параметри пътя и обекта с продукта, и след това ще върнем данните от отговора:

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

Сега по-надолу в кода ще разгледаме полето reducers за productsSlice. Преди добавяхме нов продукт с помощта на reducer productAdded, в който имахме методи reducer и prepare. Сега генерираме необходимите данни на сървъра и работим с thunk, така че ще премахнем напълно reducer productAdded от кода. След това ще добавим в метода extraReducers (в края на неговия код) още един допълнителен reducer, който в случай на успешна заявка ще добавя в slice products нов продукт директно от payload на action (помним, че такъв код е възможен само благодарение на неповторимия createSlice):

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

Да, между другото, не забравяйте да премахнете nanoid от редовете с импорти, и productAdded от експорта на actions в края на файла.

Отворете вашето приложение със студенти. Отворете в него файла studentsSlice.js. С помощта на createAsyncThunk създайте още един thunk addStudent, който ще изпраща POST заявка към сървъра, за да добави нов студент, както е показано в урока.

След това по-надолу внесете промени за studentsSlice: премахнете напълно reducer studentAdded в свойството reducers. А в полето extraReducers добавете допълнителен reducer, който ще добавя нов студент в slice students от payload на action в случай на успешна заявка, както е показано в урока.