Eliminatie van dubbele aanvragen in Redux

Deze les is nuttig voor ons in het geval dat wanneer we de applicatie starten, er dubbele verzending van dataverzoeken plaatsvindt, en vervolgens komen er productparen binnen met dezelfde id's, en als gevolg verschijnen er enge rode waarschuwingen in de console van de browser.

De oorzaak hiervan ligt in een eigenschap van het monteren van componenten in React 18 en hoger in de ontwikkelmodus (dev), bij gebruik van React.StrictMode (er wordt gezegd dat in de productiemodus (production) alles in orde is hiermee). Eerst wordt de component gemount, daarna gedismount en opnieuw gemount. Daarom wordt het verzoek twee keer verzonden.

Het is mogelijk dat tegen de tijd dat je dit materiaal bestudeert, deze dubbele mounting in React op de een of andere manier al is gewijzigd. We zullen niet de diepte ingaan, maar gewoon gebruikmaken van de React hook useRef, die ons zal helpen deze misstand te omzeilen.

Laten we onze productenapplicatie openen, en daarin het bestand ProductsList.jsx. Importeren we de hook useRef:

import { useEffect, useRef } from 'react'

En laten we nu het volgende codeblok met useEffect een beetje aanpassen:

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

Laten we eerst een nieuwe variabele dataFetch introduceren voor useRef. Initialiseren we de current eigenschap op false. Als de applicatie al is gestart en dienovereenkomstig het verzoek was verzonden, dan zal de current eigenschap al true zijn, wat betekent dat we simpelweg uit de functie terugkeren en er geen herhaald dataverzoek zal plaatsvinden. Dus, het eerder genoemde stukje code zal er nu zo uitzien:

const dataFetch = useRef(false)

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

Laten we nu onze applicatie opnieuw starten en met opluchting vaststellen dat de rode waarschuwingen in de console zijn verdwenen, en we zullen de lijst met producten zonder duplicaten zien, nu zijn het er 8, zoals we gepland hadden op de server. Nu worden de acties in Redux DevTools, gegenereerd bij het verzoek, niet meer herhaald.

Open je applicatie met studenten, en daarin het bestand StudentsList.jsx. Elimineer het probleem met het dubbele verzoek, volgens de lesmaterialen, als je die hebt.