Αποστολή δεδομένων από τον διακομιστή με αίτηση GET στο Redux

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

Ας ανοίξουμε την εφαρμογή μας με τα προϊόντα, και σε αυτήν το αρχείο server.js. Για να δουλέψουμε με αιτήματα HTTP, πρέπει να εισάγουμε στο αρχείο πολλά εργαλεία από το msw, ας το κάνουμε:

import { http, HttpResponse, delay } from 'msw'

Επίσης, ας κάνουμε αμέσως διορθώσεις για την πραγματικότητα, δηλαδή πιθανές καθυστερήσεις στο δίκτυο. Ας η τιμή της τεχνητής μας καθυστέρησης είναι 2 δευτερόλεπτα, για να βλέπουμε πώς φορτώνονται τα δεδομένα. Ας το γράψουμε μετά από const PRODS_PER_SELLER = 2:

const ARTIFICIAL_DELAY_MS = 2000

Και τώρα στο τέλος του αρχείου πριν από την εξαγωγή του worker ας δημιουργήσουμε έναν πίνακα για τους χειριστές αιτημάτων API:

export const handlers = []

Και μετά στις αγκύλες ας γράψουμε τον πρώτο χειριστή για τη διακοπή αιτήματος GET για τα προϊόντα:

export const handlers = [http.get()]

Ως πρώτη παράμετρο για το http.get θα περάσουμε κάποια ψεύτικη διεύθυνση, για παράδειγμα '/fakeServer/products', και ως δεύτερη μια ασύγχρονη συνάρτηση callback:

export const handlers = [http.get('/fakeServer/products', async () => {})]

Τώρα ας γράψουμε τον κώδικα για αυτό το callback. Με τη βοήθειά του θα εξαγάγουμε όλα τα προϊόντα από τη ΒΔ. Εδώ θα χρησιμοποιήσουμε επίσης τη συνάρτηση serializeProduct, τον κώδικα της οποίας γράψαμε στο προηγούμενο μάθημα. Ας την περάσουμε στο map. Στη συνέχεια, ας κάνουμε μια καθυστέρηση (σαν το δίκτυο να είναι αργό) και να επιστρέψουμε στην response τα αντικείμενα με τα δεδομένα των προϊόντων σε μορφή JSON:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

Και τελευταίο. Γράψαμε τον πρώτο handler για τον worker μας, ας περάσουμε σε αυτόν τον worker τον πίνακα handlers. Για να το κάνουμε αυτό, ας διορθώσουμε την τελευταία γραμμή κώδικα στο αρχείο σε:

export const worker = setupWorker(...handlers)

Ανοίξτε την εφαρμογή σας με τους μαθητές, και σε αυτήν το αρχείο server.js. Εισάγετε στο αρχείο τα υποδεικνυόμενα εργαλεία από το msw. Μελετώντας το υλικό αυτού του μαθήματος, δημιουργήστε έναν κενό πίνακα χειριστών για διακοπές αιτημάτων. Γράψτε σε αυτόν τον κώδικα για τον χειριστή αιτήματος GET για τους μαθητές. Ως διαδρομή ας έχετε '/fakeServer/students'.

Στο τέλος του αρχείου μην ξεχάσετε να περάσετε τον πίνακα χειριστών handlers στον worker.