# Отправка данных с помощью 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` экшена в случае успешного запроса, как показано уроке.

← →
↑