Eliminacija duplih zahteva u Redux-u

Ova lekcija će nam biti korisna u slučaju da se pri pokretanju aplikacije duplira slanje zahteva za podacima, a zatim stižu parovi proizvoda sa identičnim id-jevima, i, kao posledica, pojavljuju se strašna crvena upozorenja (warnings) u konzoli brauzera.

Razlog za ovo leži u specifičnosti montiranja komponenti u React 18 verziji i višim u režimu razvoja (dev), kada se koristi React.StrictMode (kažu da je u production režimu sve u redu sa ovim). Prvo se komponenta montira, zatim demontira i ponovo montira. Zbog toga i zahtev se šalje dva puta.

Moguće je da će, dok budete proučavali ovaj materijal, ovo dvostruko montiranje u React-u već biti promenjeno na neki način. Nećemo duboko ulaziti u detalje, već ćemo za sada jednostavno iskoristiti React hook useRef, koji će nam pomoći da zaobiđemo ovu nedoumicu.

Hajde da otvorimo našu aplikaciju sa proizvodima, a u njoj fajl ProductsList.jsx. Importujmo u njega hook useRef:

import { useEffect, useRef } from 'react'

A sada malo izmenimo sledeći blok koda sa useEffect:

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

Za početak, uvodimo novu varijablu dataFetch za useRef. Inicijalno ćemo postaviti njeno svojstvo current na false. Ako se aplikacija već pokrenula i, shodno tome, zahtev je bio poslat, onda će svojstvo current već biti true, što znači da ćemo jednostavno izaći iz funkcije i ponovnog slanja zahteva neće biti. Dakle, gorepomenuti deo koda sada će izgledati ovako:

const dataFetch = useRef(false)

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

Sada ponovo pokrenimo našu aplikaciju i sa olakšanjem primetimo nestanak crvenih upozorenja u konzoli, i videćemo listu proizvoda bez duplikata, sada ih ima 8, kako smo i planirali na serveru. Sada se u Redux DevTools-u akcije, generisane prilikom zahteva, više ne ponavljaju.

Otvorite vašu aplikaciju sa studentima, a u njoj fajl StudentsList.jsx. Eliminišite problem sa dvostrukim zahtevom, u skladu sa materijalom sa lekcije, ako ga imate.