POST-pyynnön käsittely, joka on lähetetty käyttäen thunkia Reduxissa

Olemme saaneet tuote- ja myyjätiedot palvelimelta ja näyttäneet ne sovelluksessamme. Mutta thunkia voidaan käyttää paitsi tietojen hakemiseen, myös tietojen lähettämiseen. Opitaan, kuinka se tehdään.

Sen jälkeen kun olemme lisänneet uuden tuotteen, se pysyy meidän store:ssamme, eli sisällä sovellustamme. Tehdään niin, että uusi tuote tallennetaan palvelimelle.

Aloitetaan palvelimesta. Täällä meidän on nyt käsiteltävä ei GET, vaan POST-pyyntö, koska palvelimelle tulee nyt tuotetietoja, joita tallennamme sinne.

Avataan tuotesovelluksemme, ja siinä tiedosto server.js. Etsitään siitä taulukko handlers ja lisätään siihen vielä yksi käsitteljä POST-pyynnölle. Täällä me otamme vastaan myös pyynnön bodyn, joten callbackiin meidän on välitettävä request:

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

Kirjoitetaan nyt aaltosulkeisiin koodi meidän takaisinkutsustamme. Puretaan aluksi pyynnön tiedot ja virhetilanteessa lähetetään palvelimelta vastaus, että emme pystyneet tallentamaan tietoja ja 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',
			},
		})
	}
})

Jos tiedot ovat kunnossa, löydämme tietokannasta myyjän id:n perusteella, joka on tullut pyynnössä ja kirjoitamme tämän myyjän kohtaan data (myyjän tiedothan meillä myös säilytetään palvelimella ;) ):

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

Seuraavaksi luodaan tietokantaan tälle tuotteelle objekti reaktioille. Ja nyt, kun meillä on kaikki tarvittavat kentät tuotteelle, luodaan tietokantaan itse tuote:

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

Asetetaan viive ja viimeisellä koodirivillä meidän takaisinkutsustamme palautetaan vastaus tuotteella:

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

Tällä olemme täysin valmiita palvelimen kanssa emkäkä enää palaa siihen.

Muuten, vielä yksi hyödyllinen asia. Rivin export const worker = setupWorker(...handlers) jälkeen voit lisätä seuraavan koodin:

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

Ja nyt pystyt näkemään tuloksen jokaisen käsitteljän suorituksesta selaimen konsolissa.

Tietenkin palvelimemme ei ole aito ja jos pakotamme sivun päivittämisen selaimessa, kaikki uudet tuoteobjektimme katoavat.

Avaa opiskelijasovelluksesi. Avaa siinä tiedosto server.js. Lisää taulukkoon handlers POST-pyynnön käsittely. Tässä pyynnön bodyssä otat vastaan uuden lisätyn opiskelijan tiedot.

Oman http.post takaisinkutsusi bodyssä pura tiedot ja virhetilanteessa lähetä vastaava vastaus.

Jos kaikki on kunnossa, etsi tietokannasta opettajan saadun id:n perusteella ja kirjoita hänen tiedonsa dataan. Kirjoita myös dataan, tietokannan perusteella luotu objekti votes.

Kerättyjen tietojen perusteella luo objekti student uudella opiskelijalla ja lähetä se palvelimen vastauksessa.