Отправка данных с помощью thunk в Redux

На прошлом занятии мы разобрались с обработкой POST-запроса на нашем фейковом сервере. Давайте теперь напишем thunk-функцию, которая будет отправлять запрос на сервер.

Откроем наше приложение с продуктами, а в нем файл productsSlice.js. Теперь после thunk fetchProducts мы с помощью createAsyncThunk создадим thunk addProduct:

export const addProduct = createAsyncThunk()

Первым параметром мы передадим в createAsyncThunk 'products/addProduct', а вторым асинхронный callback, который будет принимать объект с данными нового продукта:

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
	}
)

Теперь ниже в коде посмотрим на поле reducers для productsSlice. Раньше мы добавляли новый продукт с помощью редьюсера productAdded, в котором у нас были методы reducer и prepare. Теперь мы генерируем необходимые данные на сервере и работаем с thunk, поэтому уберем здесь полностью редьюсер productAdded из кода. А затем внесем в в метод extraReducers (в конец его кода) еще один дополнительный редьюсер, который в случае успешного запроса будет добавлять в слайс products новый продукт прямо из payload экшена (помним, что такой код возможен только благодаря неповторимому createSlice):

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

Да, кстати, не забудьте убрать nanoid из строчек с импортом, а productAdded из экспорта экшенов в конце файла.

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

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