Апрацоўка 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)
})

І цяпер вы зможаце бачыць вынік спрацоўвання кожнага апрацоўшчыка ў кансолі браўзера.

Вядома ж наш сервер несапраўдны і калі мы будзем прымусова абнаўляць старонку ў браўзеры, то ўсе нашы новыя аб'екты з прадуктамі знікнуць.