Envoi de données du serveur via une requête GET dans Redux

Nous avons donc une base de données. La première chose que nous ferons au lancement de notre application Redux est de récupérer les données des produits depuis le serveur. Pour cela, nous devons envoyer une requête GET depuis notre application. Gérons cela côté serveur.

Ouvrons notre application avec les produits, et dans celle-ci le fichier server.js. Pour pouvoir travailler avec les requêtes HTTP, nous devons importer dans le fichier plusieurs outils de msw, faisons-le :

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

Ajustons également tout de suite pour la réalité, c'est-à-dire les retards réseau possibles. Que la valeur de notre retard artificiel soit de 2 secondes, afin que nous puissions voir comment les données se chargent. Écrivons-le après const PRODS_PER_SELLER = 2 :

const ARTIFICIAL_DELAY_MS = 2000

Et maintenant, à la fin du fichier avant l'exportation du worker, créons un tableau pour les gestionnaires d'API de requêtes :

export const handlers = []

Puis, entre les crochets, écrivons le premier gestionnaire pour intercepter la requête GET des produits :

export const handlers = [http.get()]

Comme premier paramètre pour http.get, nous passerons une adresse factice, par exemple '/fakeServer/products', et comme deuxième, un callback asynchrone :

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

Écrivons maintenant le code pour ce callback. Avec celui-ci, nous allons extraire tous les produits de la base de données. Ici, nous utiliserons également la fonction serializeProduct, dont nous avons écrit le code à la leçon précédente. Passons-la dans map. Ensuite, faisons un délai (comme si le réseau était lent) et retournons dans response les objets avec les données des produits au format 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)
	}),
]

Et la dernière touche. Nous avons écrit le premier gestionnaire pour notre worker, passons à ce worker le tableau handlers. Pour cela, corrigeons la dernière ligne de code dans le fichier par :

export const worker = setupWorker(...handlers)

Ouvrez votre application avec les étudiants, et dans celle-ci le fichier server.js. Importez dans le fichier les outils indiqués depuis msw. Après avoir étudié le matériel de cette leçon, créez un tableau vide de gestionnaires pour les interceptions de requêtes. Écrivez-y le code pour le gestionnaire de la requête GET des étudiants. Comme chemin, que ce soit '/fakeServer/students'.

À la fin du fichier, n'oubliez pas de passer le tableau des gestionnaires handlers au worker.