Eliminazione della duplicazione delle richieste in Redux

Questa lezione ci sarà utile nel caso in cui all'avvio dell'applicazione venga inviata duplicata la richiesta dei dati, e poi arrivino coppie di prodotti con gli stessi id, e, di conseguenza, appaiano spaventosi avvisi rossi nella console del browser.

La causa di ciò risiede in una caratteristica del montaggio dei componenti in React 18 e versioni successive in modalità sviluppo (dev), quando si utilizza React.StrictMode (dicono che in modalità production non ci siano problemi). Prima il componente viene montato, poi smontato e rimontato nuovamente. Pertanto, la richiesta viene inviata due volte.

È possibile che quando studierai questo materiale, questo doppio montaggio in React sarà già stato modificato in qualche modo. Non approfondiremo troppo, ma useremo semplicemente l'hook di React useRef, che ci aiuterà a aggirare questo inconveniente.

Apriamo la nostra applicazione con i prodotti, e in essa il file ProductsList.jsx. Importiamoci l'hook useRef:

import { useEffect, useRef } from 'react'

E ora modifichiamo leggermente il seguente blocco di codice con useEffect:

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

Per iniziare, introduciamo una nuova variabile dataFetch per useRef. Inizialmente impostiamo la sua proprietà current su false. Se l'applicazione è già stata avviata e, di conseguenza, la richiesta è stata inviata, allora la proprietà current sarà già true, il che significa che usciremo semplicemente dalla funzione e non avverrà un nuovo tentativo di richiesta dei dati. Quindi, il suddetto frammento di codice ora sarà così:

const dataFetch = useRef(false)

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

Ora avviamo nuovamente la nostra applicazione e con sollievo notiamo la scomparsa degli avvisi rossi nella console, e vediamo la lista dei prodotti senza duplicati, ora ce ne sono 8, come avevamo pianificato sul server. Ora in Redux DevTools le azioni, generate alla richiesta, non si ripetono più.

Apri la tua applicazione con gli studenti, e in essa il file StudentsList.jsx. Risolvi il problema della doppia richiesta, secondo quanto spiegato nella lezione, se presente.