Επεξεργασία POST αιτήματος που αποστέλλεται χρησιμοποιώντας thunk στο Redux

Λάβαμε τα δεδομένα των προϊόντων και των πωλητών από τον διακομιστή και τα εμφανίσαμε στην εφαρμογή. Αλλά με το thunk μπορούμε όχι μόνο να λαμβάνουμε, αλλά και να στέλνουμε δεδομένα. Ας μάθουμε πώς να το κάνουμε.

Αφού προσθέσουμε ένα νέο προϊόν, αυτό παραμένει στο store μας, δηλαδή μέσα στην εφαρμογή μας. Ας κάνουμε έτσι ώστε το νέο προϊόν να αποθηκεύεται και στον διακομιστή.

Ας ξεκινήσουμε από τον διακομιστή. Εδώ θα πρέπει να επεξεργαστούμε όχι GET, αλλά POST αίτημα, αφού στον διακομιστή τώρα θα φτάνουν τα δεδομένα του προϊόντος, τα οποία και θα αποθηκεύουμε εκεί.

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτήν το αρχείο server.js. Ας βρούμε σε αυτό τον πίνακα handlers και ας προσθέσουμε σε αυτόν έναν ακόμη χειριστή για POST αίτημα. Εδώ θα λαμβάνουμε και το σώμα του αιτήματος, επομένως στο callback πρέπει να περάσουμε το request:

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

Τώρα στις αγκύλες θα γράψουμε τον κώδικα του callback μας. Αρχικά, ας εξαγάγουμε τα δεδομένα του αιτήματος και σε περίπτωση σφάλματος ας στείλουμε από τον διακομιστή απάντηση ότι δεν μπορέσαμε να αποθηκεύσουμε τα δεδομένα και 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',
			},
		})
	}
})

Αν τα δεδομένα είναι εντάξει, τότε στη βάση δεδομένων θα βρούμε τον πωλητή βάση id, που μας ήρθε στο αίτημα και θα γράψουμε αυτόν τον πωλητή στα data (τα δεδομένα του πωλητή βέβαια είναι και αυτά αποθηκευμένα στον διακομιστή ;) ):

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

Στη συνέχεια, στη βάση δεδομένων θα δημιουργήσουμε για αυτό το προϊόν ένα αντικείμενο με αντιδράσεις. Και τώρα, έχοντας όλα τα απαραίτητα πεδία για το προϊόν, θα δημιουργήσουμε στη βάση και το ίδιο το προϊόν:

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

Ας βάλουμε καθυστέρηση και στην τελευταία γραμμή κώδικα για το callback μας θα επιστρέψουμε απάντηση με το προϊόν:

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

Σε αυτό ολοκληρώσαμε πλήρως με τον διακομιστή και δεν θα επιστρέψουμε σε αυτόν πια.

Παρεμπιπτόντως, ένα ακόμη χρήσιμο πράγμα. Μετά τη γραμμή export const worker = setupWorker(...handlers) μπορείτε να προσθέσετε τον ακόλουθο κώδικα:

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

Και τώρα θα μπορείτε να βλέπετε το αποτέλεσμα ενεργοποίησης κάθε χειριστή στην κονσόλα του προγράμματος περιήγησης.

Φυσικά ο διακομιστής μας δεν είναι πραγματικός και αν αναγκάσουμε την ανανέωση της σελίδας στο πρόγραμμα περιήγησης, όλα τα νέα μας αντικείμενα με προϊόντα θα εξαφανιστούν.

Ανοίξτε την εφαρμογή σας με τους μαθητές. Ανοίξτε σε αυτήν το αρχείο server.js. Προσθέστε στον πίνακα handlers επεξεργασία POST αιτήματος. Στο σώμα αυτού του αιτήματος θα λαμβάνετε τα δεδομένα του νέου μαθητή που προστέθηκε.

Στο σώμα του callback για το http.post σας αποσυμπιέστε τα δεδομένα και σε περίπτωση σφάλματος στείλτε την αντίστοιχη απάντηση.

Αν όλα είναι εντάξει, τότε βρείτε στη βάση δεδομένων τον δάσκαλο βάση του ληφθέντος id και γράψτε τον στα δεδομένα. Γράψτε επίσης στα δεδομένα, το αντικείμενο votes που δημιουργήθηκε βάση της βάσης δεδομένων.

Βάση των συλλεγμένων δεδομένων δημιουργήστε ένα αντικείμενο student με τον νέο μαθητή και στείλτε τον στην απάντηση του διακομιστή.