Dublikatų pašalinimas užklausose Redux

Ši pamoka mums bus naudinga tuo atveju, jei paleidus programą mums dubliuojasi duomenų užklausų siuntimas, o vėliau ateina produktų poros su vienodais id, ir kaip pasekmė atsiranda baisūs raudoni įspėjimai naršyklės konsoleje.

To priežastis slypi komponentų montavimo ypatybėje React 18 ir aukštesnėse versijose kūrimo režime (dev), naudojant React.StrictMode (sakoma, kad production režime su tuo viskas gerai). Pirmiausia komponentas prisijungia, vėl atsijungia ir vėl prisijungia. Todėl ir užklausa siunčiama du kartus.

Galima, kad kai jūs mokysitės šią medžiagą, šis dvigubas montavimas React jau bus kažkaip pakeistas. Mes nesigilinsime į džiungles, o tiesiog naudosimės React kabluku useRef, kuris mums padės apeiti šį nesusipratimą.

Atidarykime mūsų programą su produktais, o joje failą ProductsList.jsx. Importuokime į jį kabluką useRef:

import { useEffect, useRef } from 'react'

O dabar šiek tiek pakeiskime sekantį bloką kodo su useEffect:

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

Pirmiausia įveskime naują kintamąjį dataFetch skirtą useRef. Iš pradžių nustatykime jo savybę current į false. Jei programa jau buvo paleista ir, atitinkamai, užklausa buvo išsiųsta, tai savybė current jau bus true, vadinasi mes tiesiog išeisime iš funkcijos ir pakartotinės duomenų užklausos nebus. Taigi, aukščiau minėtas kodo gabaliukas dabar bus toks:

const dataFetch = useRef(false)

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

Dabar vėl paleiskime mūsų programą ir su palengvėjimu pastebėkime raudonų įspėjimų pradingimą konsolėje, ir pamatykime produktų sąrašą be dublikatų, dabar jų 8, kaip mes ir suplanavome serveryje. Dabar Redux DevTools veiksmai, generuojami užklausos metu, daugiau nebesikartoja.

Atidarykite jūsų programą su studentais, o joje failą StudentsList.jsx. Pašalinkite problemą su dviguba užklausa, pagal pamokos medžiagą, jei jūs turite tokią.