Obdelava POST zahteve, poslane z uporabo thunk v Redux

Podatke o produktih in prodajalcih smo prejeli s strežnika in jih prikazali v aplikaciji. Vendar s pomočjo thunk ne moremo le prejemati, ampak tudi pošiljati podatke. Spoznajmo, kako to narediti.

Ko dodamo nov produkt, ta ostane v našem store, torej znotraj naše aplikacije. Naredimo tako, da se nov produkt shrani tudi na strežnik.

Začnimo s strežnikom. Tukaj bomo morali obdelati ne GET, temveč POST zahtevo, saj bodo na strežnik prihajali podatki o produktu, ki jih bomo tam shranili.

Odprimo našo aplikacijo s produkti in v njej datoteko server.js. Poiščimo v njej matriko handlers in ji dodajmo še en ročnik za POST zahtevo. Tukaj bomo sprejeli tudi telo zahteve, zato moramo v callback posredovati request:

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

Zdaj v zavitih oklepajih napišimo kodo našega povratnega klica. Za začetek izluščimo podatke zahteve in v primeru napake pošljimo odgovor s strežnika, da nam ni uspelo shraniti podatkov in status 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',
      },
    })
  }
})

Če so podatki v redu, bomo v bazi podatkov poiskali prodajalca po id-ju, ki nam je prišel v zahtevi, in tega prodajalca vpišimo v data (tudi podatki o prodajalcu so namreč shranjeni na strežniku ;) ):

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

Nato v bazi podatkov ustvarimo za ta produkt objekt z reakcijami. In zdaj, ko imamo vsa potrebna polja za produkt, ustvarimo v bazi tudi sam produkt:

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

Postavimo zakasnitev in v zadnji vrstici kode za naš povratni klic vrnimo odgovor s produktom:

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

S tem smo popolnoma končali s strežnikom in se vanj ne bomo več vrnili.

Mimogrede, še ena uporabna stvar. Za vrstico export const worker = setupWorker(...handlers) lahko dodate naslednjo kodo:

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

In zdaj boste lahko videli rezultat delovanja vsakega ročnika v brskalnikovi konzoli.

Seveda je naš strežnik nepravi in če bomo prisilno osvežili stran v brskalniku, bodo vsi naši novi objekti s produkti izginili.