Обработка POST запроса, отправленного с помощью thunk в Redux
Мы с вами получили данные продуктов и продавцов с сервера и вывели их в приложение. Но с помощью thunk можно не только получать, но и отправлять данные. Давайте узнаем, как это делать.
После того, как мы добавляем новый продукт, он остается у нас в store, то есть внутри нашего приложения. Давайте сделаем так, чтобы новый продукт сохранялся на сервере.
Давайте начнем с сервера. Здесь нам уже придется обработать не GET, а POST-запрос, поскольку на сервер теперь будут поступать данные продукта, которые мы и будем там сохранять.
Откроем наше приложение с продуктами, а в
нем файл server.js. Найдем в нем массив
handlers и добавим в него еще один
обработчик для POST-запроса. Здесь мы
будем принимать еще и тело запроса, поэтому
в callback мы должны передать request:
http.post('/fakeServer/products', async ({ request }) => {})
Теперь в фигурных скобочках напишем код
нашего колбэка. Для начала извлечем данные
запроса и в случае ошибки отправим с сервера
ответ, что мы не смогли сохранить данные и
статус 500:
http.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 (данные продавца ведь у нас тоже
хранятся на сервере ;) ):
const seller = db.seller.findFirst({
where: { id: { equals: data.seller } },
})
data.seller = seller
Далее в базе данных создадим для этого продукта объект с реакциями. И теперь, имея все необходимые поля для продукта, создадим в базе и сам продукт:
data.reactions = db.reaction.create()
const product = db.product.create(data)
Поставим задержку и в последней строчке кода для нашего колбэка вернем ответ с продуктом:
await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))
На этом мы полностью закончили с сервером и больше к нему не вернемся.
Кстати, еще одна полезная вещь. После строчки
export const worker = setupWorker(...handlers)
вы можете добавить следующий код:
worker.listHandlers().forEach((handler) => {
console.log(handler.info.header)
})
И теперь вы сможете видеть результат срабатывания каждого обработчика в консоли браузера.
Конечно же наш сервер ненастоящий и если мы будем принудительно обновлять страницу в браузере, то все наши новые объекты с продуктами исчезнут.
Откройте ваше приложение со студентами.
Откройте в нем файл server.js. Добавьте
в массив handlers бработку POST-запроса.
В теле этого запроса вы будете принимать
данные нового добавленного студента.
В теле callback для вашего http.post
распакуйте данные и в случае ошибки отправьте
соответствующий ответ.
Если же все ок, то найдите в базе данных
преподавателя по полученному id и впишите
его в данные. Впишите также в данные,
созданный на основе базы данных объект
votes.
По собранным данным создайте объект
student с новым студентом и
отошлите его в ответе сервера.