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