Beseitigung doppelter Anfragen in Redux

Diese Lektion ist für uns nützlich, wenn beim Starten der Anwendung die Datenabfrage doppelt gesendet wird und dann Paare von Produkten mit denselben id ankommen, und als Folge erscheinen schreckliche rote Warnungen in der Konsole des Browsers.

Der Grund dafür liegt in einer Besonderheit des Mountens von Komponenten in React 18 und höher im Entwicklungsmodus (dev), bei Verwendung von React.StrictMode (man sagt, im Production-Modus sei alles in Ordnung damit). Zuerst wird die Komponente eingebunden, dann ausgeblendet und wieder eingebunden. Deshalb wird die Anfrage auch zweimal gesendet.

Möglicherweise, wenn Sie diesen Stoff lernen, wird dieses doppelte Mounten in React bereits auf irgendeine Weise geändert sein. Wir werden nicht in die Tiefen eindringen, sondern einfach vorerst den React-Hook useRef verwenden, der uns hilft, dieses Missverständnis zu umgehen.

Lassen Sie uns unsere Anwendung mit den Produkten öffnen, und darin die Datei ProductsList.jsx. Importieren wir den Hook useRef:

import { useEffect, useRef } from 'react'

Und jetzt ändern wir den folgenden Codeblock mit useEffect leicht ab:

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

Führen wir zunächst eine neue Variable dataFetch für useRef ein. Setzen wir initially ihre Eigenschaft current auf false. Wenn die Anwendung bereits gestartet wurde und folglich die Anfrage gesendet wurde, dann wird die Eigenschaft current bereits true sein, was bedeutet, dass wir einfach aus der Funktion aussteigen und keine erneute Datenabfrage stattfindet. So wird der oben erwähnte Codeausschnitt jetzt so aussehen:

const dataFetch = useRef(false)

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

Starten wir nun unsere Anwendung erneut und stellen erleichtert das Verschwinden der roten Warnungen in der Konsole fest, und sehen die Liste der Produkte ohne Duplikate, jetzt sind es 8, wie wir auf dem Server geplant haben. Jetzt wiederholen sich die Aktionen in den Redux DevTools, die bei der Anfrage generiert werden, nicht mehr.

Öffnen Sie Ihre Anwendung mit den Studenten, und darin die Datei StudentsList.jsx. Beseitigen Sie das Problem mit der doppelten Anfrage gemäß den Materialien der Lektion, falls Sie eines haben.