Traitement d'une requête POST envoyée à l'aide de thunk dans Redux

Nous avons obtenu les données des produits et des vendeurs depuis le serveur et les avons affichées dans l'application. Mais avec thunk, il est possible non seulement de recevoir, mais aussi d'envoyer des données. Voyons comment faire.

Après avoir ajouté un nouveau produit, il reste dans notre store, c'est-à-dire à l'intérieur de notre application. Faisons en sorte que le nouveau produit soit sauvegardé sur le serveur.

Commençons par le serveur. Ici, nous allons devoir traiter non pas une requête GET, mais une requête POST, puisque des données du produit arriveront maintenant sur le serveur, et c'est elles que nous sauvegarderons là-bas.

Ouvrons notre application avec les produits, et dans celle-ci le fichier server.js. Trouvons-y le tableau handlers et ajoutons-y un autre handler pour la requête POST. Ici, nous allons accepter aussi le corps de la requête, donc dans le callback, nous devons passer request :

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

Maintenant, entre les accolades, écrivons le code de notre callback. Pour commencer, extrayons les données de la requête et en cas d'erreur, envoyons depuis le serveur une réponse indiquant que nous n'avons pas pu sauvegarder les données et le statut 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',
			},
		})
	}
})

Si les données sont correctes, alors dans la base de données, nous trouverons le vendeur par son id, qui nous est parvenu dans la requête et nous inscrirons ce vendeur dans data (les données du vendeur sont aussi stockées sur le serveur ;) ) :

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

Ensuite, dans la base de données, créons pour ce produit un objet avec les réactions. Et maintenant, ayant tous les champs nécessaires pour le produit, créons dans la base le produit lui-même :

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

Ajoutons un délai et à la dernière ligne de code de notre callback, retournons une réponse avec le produit :

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

Sur ce, nous avons entièrement fini avec le serveur et nous n'y reviendrons plus.

Au fait, encore une chose utile. Après la ligne export const worker = setupWorker(...handlers) vous pouvez ajouter le code suivant :

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

Et maintenant, vous pourrez voir le résultat du déclenchement de chaque handler dans la console du navigateur.

Bien sûr, notre serveur n'est pas réel et si nous actualisons forcément la page dans le navigateur, tous nos nouveaux objets de produits disparaîtront.

Ouvrez votre application avec les étudiants. Ouvrez-y le fichier server.js. Ajoutez dans le tableau handlers le traitement d'une requête POST. Dans le corps de cette requête, vous accepterez les données du nouvel étudiant ajouté.

Dans le corps du callback pour votre http.post déstructurez les données et en cas d'erreur, envoyez la réponse correspondante.

Si tout est correct, alors trouvez dans la base de données le professeur par l'id reçu et inscrivez-le dans les données. Inscrivez également dans les données, l'objet votes créé sur la base de la base de données.

A partir des données collectées, créez un objet student avec le nouvel étudiant et renvoyez-le dans la réponse du serveur.