POST kérés feldolgozása thunk használatával Redux-ban

Megkaptuk a termékek és eladók adatait a szerverről és megjelenítettük azokat az alkalmazásban. De a thunk segítségével nem csak adatokat lehet fogadni, hanem adatokat is küldeni. Nézzük meg, hogyan tehetjük ezt meg.

Miután hozzáadunk egy új terméket, az megmarad a store-ban, azaz a alkalmazásunkon belül. Tegyük úgy, hogy az új termék a szerveren is megmaradjon.

Kezdjük a szerverrel. Itt most nem GET, hanem POST kérést kell feldolgoznunk, mivel a szerverre most a termék adatai érkeznek, amelyeket ott fogunk tárolni.

Nyissuk meg a termékek alkalmazásunkat, és benne a server.js fájlt. Keressük meg benne a handlers tömböt és adjunk hozzá még egy kezelőt a POST kéréshez. Itt most a kérés testét is fogadjuk, ezért a callback-ben át kell adnunk a request-ot:

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

Most írjuk meg a callbackünk kódját a kapcsos zárójelek között. Először nyerjük ki az adatokat a kérésből és hiba esetén küldjünk a szerverről választ, hogy nem sikerült menteni az adatokat és 500 státuszt:

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',
      },
    })
  }
})

Ha minden rendben van az adatokkal, akkor az adatbázisban megkeressük az eladót az id alapján, amelyik bejött a kérésben és beírjuk ezt az eladót a data-ba (az eladó adatai ugyanis nálunk is a szerveren tárolódnak ;) ):

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

Ezután az adatbázisban létrehozunk ehhez a termékhez egy objektumot reakciókkal. És most, miután megvannak a termékhez szükséges mezők, létrehozzuk az adatbázisban magát a terméket is:

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

Tegyünk késleltetést és a callbackünk kódjának utolsó sorában adjuk vissza a választ a termékkel:

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

Ezzel teljesen befejeztük a szerverrel a munkát és többé nem térünk vissza hozzá.

Mellesleg, még egy hasznos dolog. A export const worker = setupWorker(...handlers) sor után hozzáadhatod a következő kódot:

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

És most már látni fogod az egyes kezelők lefutásának eredményét a böngésző konzoljában.

Természetesen a szerverünk nem valódi és ha kézzel frissítjük az oldalt a böngészőben, akkor minden új termék objektumunk eltűnik.