POST pieprasījuma apstrāde, nosūtīts izmantojot thunk Redux

Mēs esam saņēmuši produktu un pārdevēju datus no servera un attēlojuši tos lietotnē. Bet ar thunk var ne tikai saņemt, bet arī sūtīt datus. Uzzināsim, kā to darīt.

Pēc tam, kad mēs pievienojam jaunu produktu, tas paliek mūsu store, tas ir, mūsu lietotnes iekšienē. Padarīsim tā, lai jaunais produkts tiktu saglabāts serverī.

Sāksim ar serveri. Šeit mums jāapstrādā nevis GET, bet POST pieprasījums, jo uz serveri tiks nosūtīti produkta dati, ko mēs tur saglabāsim.

Atvērsim mūsu produktu lietotni, un tajā failu server.js. Atradīsim tajā masīvu handlers un pievienosim tam vēl vienu apstrādātāju POST pieprasījumam. Šeit mēs pieņemsim arī pieprasījuma saturu, tāpēc callback funkcijā mums jānodod request:

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

Tagad cirtainajās iekavās uzrakstīsim mūsu callback kodu. Vispirms izvilksim pieprasījuma datus un kļūdas gadījumā nosūtīsim no servera atbildi, ka nevarējām saglabāt datus un statusu 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',
			},
		})
	}
})

Ja ar datiem viss kārtībā, tad mēs datu bāzē atradīsim pārdevēju pēc id, kas mums ieradās pieprasījumā, un ierakstīsim šo pārdevēju data (galu galā pārdevēja dati arī tiek glabāti serverī ;) ):

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

Tālāk datu bāzē izveidosim šim produktam objektu ar reakcijām. Un tagad, kamēr ir visas nepieciešamās produkta lauki, izveidosim datu bāzē pašu produktu:

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

Iestatīsim aizkavi un pēdējā mūsu callback koda rindā atgriezīsim atbildi ar produktu:

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

Ar to mēs esam pilnībā pabeiguši ar serveri un vairs pie tā neatgriezīsimies.

Starp citu, vēl viena noderīga lieta. Pēc rindas export const worker = setupWorker(...handlers) jūs varat pievienot šādu kodu:

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

Un tagad jūs varēsiet redzēt katra apstrādātāja izpildes rezultātu pārlūka konsolē.

Protams, mūsu serveris nav īsts, un, ja mēs spiedīsim atjaunināt lapu pārlūkā, tad visi mūsu jaunie produktu objekti pazudīs.

Atveriet savu studentu lietotni. Atveriet tajā failu server.js. Pievienojiet masīvam handlers POST pieprasījuma apstrādi. Šī pieprasījuma saturā jūs pieņemsiet jaunā pievienotā studenta datus.

Callback funkcijas saturā jūsu http.post izvelciet datus un kļūdas gadījumā nosūtiet atbilstošu atbildi.

Ja viss ir kārtībā, tad atrodiet datu bāzē pasniedzēju pēc saņemtā id un ierakstiet viņa datus. Ierakstiet arī datos, uz datu bāzes pamata izveidoto objektu votes.

No savāktajiem datiem izveidojiet objektu student ar jaunu studentu un nosūtiet to servera atbildē.