POST užklausos apdorojimas, siunčiamas naudojant thunk Redux

Mes gavome produktų ir pardavėjų duomenis iš serverio ir atvaizdavome juos programoje. Tačiau naudojant thunk galima ne tik gauti, bet ir siųsti duomenis. Išsiaiškinkime, kaip tai padaryti.

Po to, kai pridedame naują produktą, jis lieka mūsų store, tai yra mūsų programos viduje. Padarykime taip, kad naujas produktas būtų išsaugotas serveryje.

Pradėkime nuo serverio. Čia mums jau teks apdoroti ne GET, o POST užklausą, nes į serverį dabar bus siunčiami produkto duomenys, kuriuos mes ten ir išsaugosime.

Atidarykime mūsų programą su produktais, o joje failą server.js. Raskime jame masyvą handlers ir pridėkime į jį dar vieną POST užklausos apdorojimo funkciją. Čia mes priimsime ir užklausos body, todėl callback funkcijai turime perduoti request:

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

Dabar riestiniuose skliaustuose parašykime kodą mūsų callback funkcijos. Pirmiausia išskirkime duomenis iš užklausos ir klaidų atveju išsiųskime iš serverio atsakymą, kad nepavyko išsaugoti duomenų ir 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('serverio saugojimo klaida', {
			status: 500,
			headers: {
				'Content-Type': 'application/json',
			},
		})
	}
})

Jei su duomenimis viskas tvarkoje, tada mes duomenų bazėje rasime pardavėją pagal id, kuris mums atejo užklausoje ir įrašysime šį pardavėją į data (juk pardavėjo duomenys taip pat saugomi serveryje ;) ):

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

Toliau duomenų bazėje sukursime šiam produktui objektą su reakcijomis. Ir dabar, turėdami visus reikalingus laukus produktui, sukursime duomenų bazėje ir patį produktą:

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

Nustatykime delsą ir paskutinėje kodo eilutėje grąžinkime atsakymą su produktu:

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

Čia mes visiškai baigėme su serveriu ir daugiau prie jo negrįšime.

Beje, dar vienas naudingas dalykas. Po eilutės export const worker = setupWorker(...handlers) galite pridėti šį kodą:

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

Ir dabar galėsite matyti rezultatą kiekvienos apdorojimo funkcijos veikimo naršyklės konsolėje.

Žinoma, mūsų serveris netikras ir jei mes priversime atnaujinti puslapį naršyklėje, visi mūsų nauji produktų objektai išnyks.

Atidarykite savo programą su studentais. Atidarykite joje failą server.js. Pridėkite į masyvą handlers POST užklausos apdorojimą. Šios užklausos body priimsite naujo pridėto studento duomenis.

Jūsų http.post callback funkcijos body išskleiskite duomenis ir klaidos atveju išsiųskite atitinkamą atsakymą.

Jei viskas gerai, tada duomenų bazėje suraskite dėstytoją pagal gautą id ir įrašykite jį į duomenis. Taip pat įrašykite į duomenis, duomenų bazės pagrindu sukurtą objektą votes.

Pagal surinktus duomenis sukurkite objektą student su nauju studentu ir atsiųskite jį serverio atsakyme.