Prelucrarea unei cereri POST trimise folosind thunk în Redux

Am obținut datele despre produse și vânzători de la server și le-am afișat în aplicație. Dar cu thunk poți nu doar să primești, ci și să trimiți date. Să aflăm cum să facem asta.

După ce adăugăm un nou produs, acesta rămâne în store-ul nostru, adică în interiorul aplicației noastre. Să facem astfel încât noul produs să fie salvat pe server.

Să începem cu serverul. Aici va trebui deja să prelucrăm nu o cerere GET, ci una POST, deoarece către server vor sosi acum datele produsului, pe care le vom salva acolo.

Să deschidem aplicația noastră cu produse, iar în ea fișierul server.js. Să găsim în el array-ul handlers și să adăugăm în el încă un handler pentru cererea POST. Aici vom accepta și body-ul cererii, de aceea în callback trebuie să îi transmitem request:

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

Acum în acolade vom scrie codul callback-ului nostru. Pentru început, să extragem datele cererii și în caz de eroare să trimitem de pe server un răspuns că nu am putut salva datele și statusul 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',
			},
		})
	}
})

Dacă datele sunt în regulă, atunci în baza de date vom găsi vânzătorul după id-ul care ne-a venit în cerere și vom scrie acest vânzător în data (datele vânzătorului la urma urmei sunt și ele stocate pe server ;) ):

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

În continuare, în baza de date vom crea pentru acest produs un obiect cu reacții. Și acum, având toate câmpurile necesare pentru produs, să creăm în baza de date și produsul în sine:

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

Să setăm o întârziere și în ultima linie de cod pentru callback-ul nostru să returnăm un răspuns cu produsul:

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

Cu aceasta am terminat complet cu serverul și nu ne vom mai întoarce la el.

Apropo, încă un lucru util. După linia export const worker = setupWorker(...handlers) puteți adăuga următorul cod:

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

Și acum veți putea vedea rezultatul activării fiecărui handler în consola browser-ului.

Desigur, serverul nostru nu este real și dacă vom reîmprospăta forțat pagina în browser, toate obiectele noastre noi cu produse vor dispărea.

Deschideți aplicația voastră cu studenții. Deschideți în ea fișierul server.js. Adăugați în array-ul handlers prelucrarea unei cereri POST. În body-ul acestei cereri veți accepta datele noului student adăugat.

În body-ul callback-ului pentru http.post extrageți datele și în caz de eroare trimiteți un răspuns corespunzător.

Dacă totul este în regulă, atunci găsiți în baza de date profesorul după id-ul primit și scrieți-l în date. Scrieți de asemenea în date, un obiect votes creat pe baza bazei de date.

Pe baza datelor adunate creați un obiect student cu noul student și trimițeți-l în răspunsul serverului.