Duplikált lekérdezések eltávolítása Redux-ban

Ez a lecke akkor lesz hasznos számunkra, ha az alkalmazás indításakor duplikálódik az adatlekérdezés kérése, majd párosával érkeznek termékek azonos id-val, és ennek következtében ijesztő piros figyelmeztetések jelennek meg a böngésző konzoljában.

Ennek oka a React 18 és afölötti verzióiban lévő komponens mountolás sajátosságában rejlik fejlesztői módban (dev), amikor a React.StrictMode-ot használjuk (azt mondják, production módban minden rendben ezzel). Először a komponens csatlakozik, majd lecsatlakozik és újra csatlakozik. Ezért küldődik el a lekérdezés két alkalommal.

Lehetséges, hogy amikor ezt az anyagot tanulod, ez a kettős mountolás a React-ban már valahogy megváltozott. Nem fogunk belemélyülni a részletekbe, hanem egyszerűen csak használni fogjuk a React useRef hook-ot, amely segít nekünk megkerülni ezt a problémát.

Nyissuk meg a termékek alkalmazásunkat, és benne a ProductsList.jsx fájlt. Importáljuk bele a useRef hook-ot:

import { useEffect, useRef } from 'react'

És most módosítsuk kissé a következő useEffect kódblokkot:

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

Kezdjük azzal, hogy bevezetünk egy új dataFetch változót a useRef számára. Kezdetben állítsuk a current tulajdonságát false-ra. Ha az alkalmazás már elindult és ennek megfelelően a lekérdezés elküldésre került, akkor a current tulajdonság már true lesz, ami azt jelenti, hogy egyszerűen kilépünk a függvényből, és az adatok ismételt lekérése nem fog megtörténni. Tehát a fent említett kódrész most így fog kinézni:

const dataFetch = useRef(false)

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

Most indítsuk újra az alkalmazásunkat és megkönnyebbülve vegyük észre a piros figyelmeztetések eltűnését a konzolon, és lássuk a termékek listáját duplikációk nélkül, most 8 darab van belőlük, ahogyan a szerveren terveztük. Most a Redux DevTools-ban a lekérdezés során generált action-ök már nem ismétlődnek.

Nyisd meg a diákok alkalmazásodat, és benne a StudentsList.jsx fájlt. Szüntesd meg a kettős lekérdezés problémáját a lecke anyagának megfelelően, ha ilyen problémád adódna.