Eliminering av dubbel förfrågan i Redux

Den här lektionen kommer att vara användbar för oss om det när applikationen startas skickas dubbla förfrågningar om data, och sedan kommer par av produkter med samma id, och som en följd uppstår hemska röda varningar i webbläsarens konsol.

Orsaken till detta ligger i egenskapen hos montering av komponenter i React 18 och högre i utvecklingsläge (dev), när man använder React.StrictMode (de säger att i production-läge är allt ok med detta). Först monteras komponenten, sedan avmonteras den och monteras igen. Därför skickas förfrågan två gånger.

Det är möjligt att när du studerar detta material, kommer denna dubbla montering i React redan att ha ändrats på något sätt. Vi kommer inte att fördjupa oss i djungeln, utan bara använda React hooken useRef, som kommer att hjälpa oss att kringgå denna missuppfattning.

Låt oss öppna vår applikation med produkter, och i den filen ProductsList.jsx. Importera hooken useRef i den:

import { useEffect, useRef } from 'react'

Och låt oss nu ändra följande kodblock med useEffect lite grann:

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

Låt oss först introducera en ny variabel dataFetch för useRef. Initialt sätter vi dess egenskap current till false. Om applikationen redan har startats och, följaktligen, förfrågan har skickats, kommer egenskapen current redan att vara true, vilket betyder att vi helt enkelt lämnar funktionen och ingen upprepad dataförfrågan kommer att ske. Så, den ovan nämnda kodbiten kommer nu att se ut så här:

const dataFetch = useRef(false)

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

Låt oss nu starta vår applikation igen och med lättnad notera försvinnandet av de röda varningarna i konsolen, och se listan över produkter utan dubbletter, nu finns det 8 av dem, precis som vi planerade på servern. Nu i Redux DevTools upprepas inte actions som genereras vid en förfrågan längre.

Öppna din applikation med studenter, och i den filen StudentsList.jsx. Eliminera problemet med dubbelförfrågan, enligt lektionens material, om du har ett sådant problem.