Odstranjevanje podvajanja zahtevkov v Reduxu

Ta lekcija nam bo koristila v primeru, če se ob zagonu aplikacije pri nas podvoji pošiljanje zahtevka za podatki, nato pa pridejo pari produktov z enakimi ID-ji, in kot posledica se pojavijo strašna rdeča opozorila v konzoli brskalnika.

Vzrok za to je v posebnosti montiranja komponent v React 18 verziji in višje v načinu razvoja (dev), pri uporabi React.StrictMode (pravijo, da je v production načinu vse v redu s tem). Najprej se komponenta priklopi, nato odklopi in spet priklopi. Zato se zahtevek pošlje dvakrat.

Možno je, da bo, ko boste preučevali to gradivo, to dvojno montiranje v React-u že na nek način spremenjeno. Ne bomo se poglabljali v podrobnosti, ampak bomo preprosto za zdaj uporabili React hook useRef, ki nam bo pomagal obiti to nesporazum.

Odprimo našo aplikacijo s produkti, v njej pa datoteko ProductsList.jsx. Uvažajmo vanjo hook useRef:

import { useEffect, useRef } from 'react'

In zdaj malo spremenimo naslednji blok kode z useEffect:

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

Za začetek vpeljimo novo spremenljivko dataFetch za useRef. Sprva nastavimo njeno lastnost current na false. Če se je aplikacija že zagnala in je bil zahtevek poslan, bo lastnost current že true, kar pomeni, da bomo preprosto zapustili funkcijo in ponovnega zahtevka za podatki ne bo. Torej, bo omenjeni košček kode zdaj takšen:

const dataFetch = useRef(false)

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

Zdaj ponovno zaženimo našo aplikacijo in z olajšanjem opazimo izginotje rdečih opozoril v konzoli, in vidimo seznam produktov brez dvojnikov, zdaj jih je 8, kot smo načrtovali na strežniku. Zdaj se v Redux DevTools akcije, generirane ob zahtevku, ne ponavljajo več.

Odprite vašo aplikacijo s študenti, v njej pa datoteko StudentsList.jsx. Odpravite težavo z dvojnim zahtevkom, v skladu z gradivom lekcije, če jo imate.