Élimination de la duplication de requête dans Redux

Cette leçon nous sera utile dans le cas où, au lancement de l'application, l'envoi de la requête de données est dupliqué, et où des paires de produits avec les mêmes id arrivent ensuite, entraînant l'apparition de terribles avertissements rouges dans la console du navigateur.

La raison de cela réside dans une particularité du montage des composants dans React 18 et supérieur en mode développement (dev), lors de l'utilisation de React.StrictMode (on dit qu'en mode production, tout va bien avec cela). D'abord, le composant est monté, puis démonté et remonté. C'est pourquoi la requête est envoyée deux fois.

Il est possible que lorsque vous étudierez ce contenu, ce double montage dans React ait déjà été modifié d'une manière ou d'une autre. Nous n'allons pas nous aventurer dans les détails techniques, mais simplement utiliser le hook React useRef, qui nous aidera à contourner ce problème.

Ouvrons notre application avec les produits, et dans celle-ci, le fichier ProductsList.jsx. Importons-y le hook useRef :

import { useEffect, useRef } from 'react'

Et maintenant, modifions légèrement le bloc de code suivant avec useEffect :

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

Pour commencer, introduisons une nouvelle variable dataFetch pour useRef. Initialement, définissons sa propriété current à false. Si l'application a déjà été lancée et, par conséquent, la requête a été envoyée, alors la propriété current sera déjà à true, ce qui signifie que nous quitterons simplement la fonction et aucune nouvelle requête de données n'aura lieu. Ainsi, le morceau de code mentionné ci-dessus sera maintenant comme suit :

const dataFetch = useRef(false)

useEffect(() => {
	if (dataFetch.current) return
	dataFetch.current = true
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

Maintenant, relançons notre application et constatons avec soulagement la disparition des avertissements rouges dans la console, et voyons la liste des produits sans doublons, maintenant il y en a 8, comme nous l'avions prévu sur le serveur. Maintenant, dans Redux DevTools, les actions générées lors de la requête ne se répètent plus.

Ouvrez votre application avec les étudiants, et dans celle-ci, le fichier StudentsList.jsx. Éliminez le problème de double requête, selon le contenu de la leçon, si vous en avez un.