Εγκατάσταση του msw για εργασία με το server μέρος στο Redux

Στα προηγούμενα μαθήματα κάναμε αρκετές επιπλέον αλλαγές στην εφαρμογή μας. Τώρα πρέπει να ασχοληθούμε με τον server, με τον οποίο η εφαρμογή μας θα ανταλλάσσει δεδομένα.

Δεν θα έχουμε πραγματικό server, οπότε απλά θα προσομοιώσουμε την εργασία με αυτόν, χρησιμοποιώντας ένα εξαιρετικό εργαλείο Mock Service Worker. Το Mock Service Worker (MSW) είναι ένα εργαλείο για προσομοίωση API, που χρησιμοποιεί ένα τυποποιημένο API Service Worker, σχεδιασμένο για να υποκλέπτει αιτήματα στο δικτυακό επίπεδο. Το MSW θα παράγει ψεύτικες απαντήσεις (responses) στα αιτήματά μας (requests). Επιπλέον, όπως ισχυρίζονται οι προγραμματιστές, το εργαλείο είναι τόσο αποτελεσματικό και ευέλικτο, που μετά από διόρθωση σφαλμάτων με mocks (για τα οποία στην εφαρμογή δεν απαιτείται δημιουργία τίποτα ειδικού), η εφαρμογή μπορεί να λειτουργήσει με έναν πραγματικό εξωτερικό server. Η τεκμηρίωση για αυτό είναι αρκετά εκτενής, και, αν σας ενδιαφέρει το MSW, μπορείτε να τη διαβάσετε στην επίσημη ιστοσελίδα.

Ας προχωρήσουμε στην εγκατάσταση του msw. Για αυτό ανοίγουμε το project μας με τα προϊόντα και στο τερματικό πληκτρολογούμε:

npm install msw --save-dev

Για να λειτουργήσει το msw χρειαζόμαστε επίσης να δημιουργήσουμε και να αντιγράψουμε το mockServiceWorker.js σε κάποιον δημόσιο φάκελο. Συχνά αυτός είναι ο φάκελος public. Εμείς έχουμε έναν άδειο φάκελο public, ας αντιγράψουμε το εκεί. Για αυτό εκτελέστε στο τερματικό την εντολή και στη συνέχεια συμφωνήστε στη χρήση του public:

npx msw init public

Τώρα ας κοιτάξουμε στον public, εκεί θα πρέπει να εμφανιστεί το παραγόμενο script mockServiceWorker.js. Τώρα ας εκκινήσουμε την εφαρμογή μας με τα προϊόντα και στη γραμμή διευθύνσεων του browser πληκτρολογούμε http://localhost:5173/mockServiceWorker.js (καθώς η εφαρμογή μας λειτουργεί στη θύρα 5173). Βλέπετε στο παράθυρο του browser εμφανίστηκε το περιεχόμενο του αρχείου mockServiceWorker.js; Αυτό σημαίνει ότι όλα είναι υπέροχα, προχωράμε.

Στη συνέχεια ας δημιουργήσουμε στο φάκελο src έναν φάκελο api, και μέσα σε αυτό ένα αρχείο server.js, στο οποίο θα γράφουμε τον κώδικα του server. Τώρα ανοίγουμε το server.js και εισάγουμε σε αυτό τη συνάρτηση setupWorker από την εγκατεστημένη βιβλιοθήκη msw:

import { setupWorker } from 'msw/browser'

Πιο κάτω στο αρχείο δημιουργούμε τη μεταβλητή worker και την εξάγουμε:

export const worker = setupWorker()

Και τώρα ας ανοίξουμε το αρχείο main.jsx και εισάγουμε σε αυτό τον worker μας:

import { worker } from './api/server'

Τώρα ας τον συνδέσουμε στην εφαρμογή μας. Για αυτό τον κώδικα, με τον οποίο δημιουργούμε τη ρίζα της εφαρμογής μας React, θα τον τυλίξουμε σε μια συνάρτηση, θα την ονομάσουμε main και πρώτη γραμμή θα προσθέσουμε σε αυτήν τη συνάρτηση εκκίνησης για τον worker. Φυσικά δεν θα ξεχάσουμε να καλέσουμε και την ίδια την main. Ο πλήρης κώδικας μετά από όλες τις γραμμές με εισαγωγές τώρα θα μοιάζει έτσι:

async function main() {
	await worker.start({ onUnhandledRequest: 'bypass' })

	ReactDOM.createRoot(document.getElementById('root')).render(
		<React.StrictMode>
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	)
}

main()

Τώρα είμαστε σίγουροι ότι η εφαρμογή μας δεν θα αρχίσει να λειτουργεί πριν (και να στείλει αιτήματα ;) ), από ότι θα ξεκινήσει ο worker.

Ας εκκινήσουμε την εφαρμογή μας και ας ανοίξουμε στο browser την κονσόλα για προγραμματιστές. Αν βλέπετε σε αυτήν το κείμενο '[MSW] Mocking enabled.', τότε είστε υπέροχοι και τα εγκαταστήσατε όλα σωστά!!!

Ανοίξτε την εφαρμογή σας με τους μαθητές. Αφού μελετήσετε το υλικό αυτού του μαθήματος, εγκαταστήστε το Mock Service Worker για την εφαρμογή σας.

Δημιουργήστε το αρχείο server.js, και σε αυτό δημιουργήστε έναν worker. Συνδέστε τον worker στην εφαρμογή στο main.js, όπως φαίνεται στο μάθημα. Βεβαιωθείτε ότι όλα λειτουργούν.