Gestione della richiesta POST inviata utilizzando thunk in Redux

Abbiamo ottenuto i dati dei prodotti e dei venditori dal server e li abbiamo visualizzati nell'applicazione. Ma con thunk è possibile non solo ricevere, ma anche inviare dati. Scopriamo come farlo.

Dopo aver aggiunto un nuovo prodotto, rimane nel nostro store, cioè all'interno della nostra applicazione. Facciamo in modo che il nuovo prodotto venga salvato sul server.

Iniziamo dal server. Qui dovremo gestire non una GET, ma una richiesta POST, poiché al server arriveranno ora i dati del prodotto che andremo a salvare.

Apriamo la nostra applicazione con i prodotti, e in essa il file server.js. Troviamo l'array handlers e aggiungiamoci un altro gestore per la richiesta POST. Qui dovremo accettare anche il corpo della richiesta, quindi nel callback dobbiamo passare request:

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

Ora tra le parentesi graffe scriviamo il codice del nostro callback. Per cominciare, estraiamo i dati della richiesta e in caso di errore inviamo dal server una risposta che non siamo riusciti a salvare i dati e lo 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',
			},
		})
	}
})

Se i dati sono a posto, allora nel database troveremo il venditore per id, che ci è arrivato nella richiesta e scriveremo questo venditore in data (anche i dati del venditore dopotutto sono memorizzati sul server ;) ):

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

Successivamente nel database creeremo per questo prodotto un oggetto con le reazioni. E ora, avendo tutti i campi necessari per il prodotto, creiamo nel database il prodotto stesso:

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

Impostiamo un ritardo e nell'ultima riga di codice per il nostro callback restituiamo la risposta con il prodotto:

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

Con questo abbiamo completamente finito con il server e non ci torneremo più.

A proposito, un'altra cosa utile. Dopo la riga export const worker = setupWorker(...handlers) puoi aggiungere il seguente codice:

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

E ora potrai vedere il risultato dell'attivazione di ogni gestore nella console del browser.

Naturalmente il nostro server non è reale e se aggiorniamo forzatamente la pagina nel browser, tutti i nostri nuovi oggetti prodotto scompariranno.

Apri la tua applicazione con gli studenti. Apri in essa il file server.js. Aggiungi nell'array handlers la gestione della richiesta POST. Nel corpo di questa richiesta accetterai i dati del nuovo studente aggiunto.

Nel corpo del callback per il tuo http.post estrai i dati e in caso di errore invia una risposta appropriata.

Se invece tutto ok, allora trova nel database il docente in base all'id ricevuto e scrivilo nei dati. Scrivi anche nei dati, un oggetto votes creato basandosi sul database.

Con i dati raccolti crea un oggetto student con il nuovo studente e invialo nella risposta del server.