Odstránenie duplicitných požiadaviek v Reduxe

Táto lekcia nám bude užitočná v prípade, keď sa pri spustení aplikácie duplikuje odoslanie požiadavky na dáta, a potom prichádzajú páry produktov s rovnakými id, a následne sa objavujú strašné červené varovania v konzole prehliadača.

Príčina tohto je v špecifiká mountovania komponentov v React 18 a vyšších verziách v režime vývoja (dev), pri použití React.StrictMode (hovorí sa, že v production režime je s tým všetko v poriadku). Najprv je komponent pripojený, potom je odpojený a znova pripojený. Preto sa požiadavka odosiela dvakrát.

Je možné, že keď budete študovať tento materiál, toto dvojité mountovanie v Reacte už bude nejakým spôsobom zmenené. Nebudeme sa ponárať do detailov, ale jednoducho teraz použijeme React hook useRef, ktorý nám pomôže obísť tento problém.

Otvorme našu aplikáciu s produktami a v nej súbor ProductsList.jsx. Importujme do neho hook useRef:

import { useEffect, useRef } from 'react'

A teraz trochu zmeňme nasledujúci blok kódu s useEffect:

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

Na začiatok zaveďme novú premennú dataFetch pre useRef. Spočiatku nastavme jej vlastnosť current na false. Ak sa aplikácia už spustila a, následne, požiadavka bola odoslaná, tak vlastnosť current už bude true, čo znamená, že jednoducho opustíme funkciu a k opätovnej požiadavke na dáta nedôjde. Takže, vyššie spomenutý kúsok kódu teraz bude takýto:

const dataFetch = useRef(false)

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

Teraz znova spustíme našu aplikáciu a s úľavou zaznamenáme zmiznutie červených varovaní v konzole, a uvidíme zoznam produktov bez duplíkátov, teraz ich je 8, ako sme naplánovali na serveri. Teraz v Redux DevTools akcie, generované pri požiadavke, sa už viac neopakujú.

Otvorte vašu aplikáciu so študentmi, a v nej súbor StudentsList.jsx. Odstráňte problém s dvojitou požiadavkou, podľa materiálov lekcie, ak taký u vás existuje.