Obrada POST zahteva, poslatog pomoću thunk u Redux-u

Mi smo sa vama dobili podatke o proizvodima i prodavcima sa servera i prikazali ih u aplikaciji. Ali pomoću thunk-a možemo ne samo da primamo, već i da šaljemo podatke. Hajde da saznamo kako se to radi.

Nakon što dodamo novi proizvod, on ostaje u našem store-u, odnosno unutar naše aplikacije. Hajde da učinimo tako, da se novi proizvod sačuva na serveru.

Počnimo sa serverom. Ovde ćemo već morati da obradimo ne GET, već POST zahtev, jer će na server sada stizati podaci o proizvodu, koje ćemo i tamo čuvati.

Otvorimo našu aplikaciju sa proizvodima, a u njoj fajl server.js. Pronađimo u njemu niz handlers i dodajmo u njega još jedan obrađivač za POST zahtev. Ovde ćemo prihvatati još i telo zahteva, zato u callback moramo da prosledimo request:

http.post('/fakeServer/products', async ({ request }) => {})

Sada u vitičastim zagradama napišimo kod našeg callback-a. Za početak izvučimo podatke zahteva i u slučaju greške pošaljemo sa servera odgovor da nismo uspeli da sačuvamo podatke i status 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',
			},
		})
	}
})

Ako su podaci u redu, onda ćemo u bazi podataka naći prodavca po id-u, koji nam je stigao u zahtevu i upisati tog prodavca u data (podaci o prodavcu se ipak čuvaju i na serveru ;) ):

const seller = db.seller.findFirst({
	where: { id: { equals: data.seller } },
})
data.seller = seller

Zatim u bazi podataka kreirajmo za ovaj proizvod objekat sa reakcijama. I sada, imajući sva neophodna polja za proizvod, kreirajmo u bazi i sam proizvod:

data.reactions = db.reaction.create()
const product = db.product.create(data)

Postavimo kašnjenje i u poslednjoj liniji koda za naš callback vratimo odgovor sa proizvodom:

await delay(ARTIFICIAL_DELAY_MS)
return HttpResponse.json(serializeProduct(product))

Ovim smo u potpunosti završili sa serverom i više se nećemo vraćati na njega.

Inače, još jedna korisna stvar. Nakon linije export const worker = setupWorker(...handlers) možete dodati sledeći kod:

worker.listHandlers().forEach((handler) => {
	console.log(handler.info.header)
})

I sada ćete moći da vidite rezultat aktiviranja svakog obrađivača u konzoli brauzera.

Naravno, naš server nije pravi i ako prisilno osvežavamo stranicu u brauzeru, svi naši novi objekti sa proizvodima će nestati.

Otvorite vašu aplikaciju sa studentima. Otvorite u njoj fajl server.js. Dodajte u niz handlers obradu POST zahteva. U telu ovog zahteva ćete primati podatke novog dodatog studenta.

U telu callback-a za vaš http.post raspakujte podatke i u slučaju greške pošaljite odgovarajući odgovor.

Ako je sve u redu, onda pronađite u bazi podataka nastavnika po dobijenom id-u i upišite ga u podatke. Upišite takođe u podatke, kreiran na osnovu baze podataka objekat votes.

Po prikupljenim podacima kreirajte objekat student sa novim studentom i pošaljite ga u odgovoru servera.