Eliminering af duplikeret forespørgsel i Redux

Denne lektion vil være nyttig for os i det tilfælde, hvor vores applikation ved opstart duplikerer afsendelse af dataforespørgsel, og derefter modtager par af produkter med identiske id'er, og som følge heraf opstår der skrækkelige røde advarsler i browserens konsol.

Årsagen til dette ligger i en egenskab ved montering af komponenter i React 18 version og derover i udviklingstilstand (dev), når der bruges React.StrictMode (de siger, at i production-tilstand er alt okay med dette). Først monteres komponenten, derefter afmonteres den og monteres igen. Derfor afsendes forespørgslen to gange.

Det er muligt, at når du studerer dette materiale, vil denne dobbelte montering i React allerede være ændret på en eller anden måde. Vi vil ikke dykke ned i detaljer, men blot bruge React hooket useRef, som vil hjælpe os med at omgå denne misforståelse.

Lad os åbne vores applikation med produkter, og i den filen ProductsList.jsx. Importer hooket useRef i den:

import { useEffect, useRef } from 'react'

Og lad os nu ændre følgende blok kode med useEffect en smule:

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

Til at starte med, introducerer vi en ny variabel dataFetch for useRef. Indledningsvis sætter vi dens egenskab current til false. Hvis applikationen allerede er startet og, følgelig, forespørgslen blev afsendt, så vil egenskaben current allerede være true, hvilket betyder at vi simpelthen afslutter funktionen og en gentagelse af dataforespørgslen vil ikke finde sted. Så, den ovennævnte kodeblok vil nu se sådan ud:

const dataFetch = useRef(false)

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

Lad os nu starte vores applikation igen og med lettelse konstatere forsvinden af de røde advarsler i konsollen, og se listen over produkter uden dubletter, nu er der 8 af dem, som vi planlagde på serveren. Nu i Redux DevTools er actions, genereret ved forespørgslen, ikke længere gentaget.

Åbn din applikation med studerende, og i den filen StudentsList.jsx. Eliminer problemet med dobbelt forespørgsel, i henhold til materialet i lektionen, hvis du har et sådant problem.