Обработка POST запроса, отправленного с помощью thunk в Redux

Мы с вами получили данные продуктов и продавцов с сервера и вывели их в приложение. Но с помощью thunk можно не только получать, но и отправлять данные. Давайте узнаем, как это делать.

После того, как мы добавляем новый продукт, он остается у нас в store, то есть внутри нашего приложения. Давайте сделаем так, чтобы новый продукт сохранялся на сервере.

Давайте начнем с сервера. Здесь нам уже придется обработать не GET, а POST-запрос, поскольку на сервер теперь будут поступать данные продукта, которые мы и будем там сохранять.

Откроем наше приложение с продуктами, а в нем файл server.js. Найдем в нем массив handlers и добавим в него еще один обработчик для POST-запроса. Здесь мы будем принимать еще и тело запроса, поэтому в callback мы должны передать request:

api/server.jshttp.post('/fakeServer/products', async ({ request }) => {})

Теперь в фигурных скобочках напишем код нашего колбэка. Для начала извлечем данные запроса и в случае ошибки отправим с сервера ответ, что мы не смогли сохранить данные и статус 500:

api/server.jshttp.post('/fakeServer/products', async ({ request }) => {
  const data = await request.json()

  if (data.content === 'error') {
    await delay(ARTIFICIAL_DELAY_MS)
    
    return new HttpResponse('server save error', {
      status: 500,
      headers: {
        'Content-Type': 'application/json',
      },
    })
  }
})

Если с данными все в порядке, то мы в базе данных найдем продавца по id, который нам пришел в запросе и впишем этого продавца в data (данные продавца ведь у нас тоже хранятся на сервере ;) ):

api/server.jsconst seller = db.seller.findFirst({
  where: { id: { equals: data.seller } },
})
data.seller = seller

Далее в базе данных создадим для этого продукта объект с реакциями. И теперь, имея все необходимые поля для продукта, создадим в базе и сам продукт:

api/server.jsdata.reactions = db.reaction.create()
const product = db.product.create(data)

Поставим задержку и в последней строчке кода для нашего колбэка вернем ответ с продуктом:

api/server.jsawait delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

На этом мы полностью закончили с сервером и больше к нему не вернемся.

Кстати, еще одна полезная вещь. После строчки export const worker = setupWorker(...handlers) вы можете добавить следующий код:

api/server.jsworker.listHandlers().forEach((handler) => {
  console.log(handler.info.header)
})

И теперь вы сможете видеть результат срабатывания каждого обработчика в консоли браузера.

Конечно же наш сервер ненастоящий и если мы будем принудительно обновлять страницу в браузере, то все наши новые объекты с продуктами исчезнут.