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

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

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

products/productsSlice.jsexport const addProduct = createAsyncThunk()

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

products/productsSlice.jsexport const addProduct = createAsyncThunk(
  'products/addProduct',
  async (newProduct) => {}
)

В коде этого колбэка мы вызовем клиента, передав ему параметрами путь и объект с продуктом, а затем вернем данные ответа:

products/productsSlice.jsexport 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):

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

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