Eliminering av duplisert forespørsel i Redux

Denne leksjonen vil være nyttig for oss i tilfellet der det dupliseres sending av dataforespørsel når applikasjonen starter, og deretter kommer det par av produkter med samme id, og som følge av dette vises skumle røde advarsler i konsollen til nettleseren.

Årsaken til dette ligger i egenskapen ved montering av komponenter i React 18 og høyere i utviklingsmodus (dev), når man bruker React.StrictMode (de sier at i produksjonsmodus er alt i orden med dette). Først monteres komponenten, deretter demonteres den og monteres på nytt. Derfor sendes forespørselen to ganger.

Det er mulig at når du studerer dette stoffet, vil denne doble monteringen i React allerede være endret på en eller annen måte. Vi vil ikke fordype oss i djungelen, men bare bruke React-hooken useRef, som vil hjelpe oss å omgå denne misforståelsen.

La oss åpne applikasjonen vår med produkter, og i den filen ProductsList.jsx. Importer hooken useRef i den:

import { useEffect, useRef } from 'react'

Og la oss nå endre følgende kodeblokk med useEffect litt:

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

Til å begynne med, la oss introdusere en ny variabel dataFetch for useRef. Initialt setter vi dens egenskap current til false. Hvis applikasjonen allerede har startet og følgelig forespørselen ble sendt, vil egenskapen current allerede være true, no som betyr at vi bare vil avslutte funksjonen og ingen gjentakende forespørsel etter data vil skje. Så, den nevnte kodesnutten vil nå se slik ut:

const dataFetch = useRef(false)

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

La oss nå starte applikasjonen vår på nytt og med lettelse konstatere at de røde advarslene i konsollen har forsvunnet, og vi ser listen over produkter uten duplikater, nå er det 8 av dem, slik som vi planla på serveren. Nå i Redux DevTools gjentas ikke handlingene som genereres under forespørselen lenger.

Åpne applikasjonen din med studenter, og i den filen StudentsList.jsx. Eliminer problemet med dobbel forespørsel, i henhold til leksjonens stoff, hvis du har et slikt problem.