Dublikātu pieprasījumu novēršana Redux

Šī nodarbība mums noderēs gadījumā, ja, palaižot lietotni, mums dublējas datu pieprasījuma sūtīšana, un pēc tam ierodas produktu pāri ar identiskiem id, un kā sekas pārlūkprogrammas konsolē parādās biedējoši sarkani brīdinājumi.

Iemesls tam slēpjas React komponentu montēšanas īpatnībā React 18 versijā un augstāk izstrādes režīmā (dev), izmantojot React.StrictMode (stāsta, ka production režīmā ar to viss kārtībā). Vispirms komponents tiek pieslēgts, pēc tam atslēgts un atkal pieslēgts. Tāpēc pieprasījums tiek sūtīts divreiz.

Iespējams, kad jūs mācīsities šo materiālu, šī dubultā montēšana React jau būs kaut kā mainīta. Mēs neiedziļināsimies detaļās, bet vienkārši izmantosim React hook useRef, kas mums palīdzēs apiet šo nepilnību.

Atvērsim mūsu produktu lietotni, un tajā failu ProductsList.jsx. Importēsim tajā hook useRef:

import { useEffect, useRef } from 'react'

Un tagad nedaudz mainīsim nākamo bloku ar useEffect:

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

Sākumā ieviest jaunu mainīgo dataFetch priekš useRef. Sākotnēji iestatām tā īpašību current uz false. Ja lietotne jau ir palaidusies un, attiecīgi, pieprasījums bija nosūtīts, tad īpašība current jau būs true, kas nozīmē, ka mēs vienkārši iziesim no funkcijas un atkārtotas datu pieprasīšanas nenotiks. Tātad, iepriekš minētais koda gabals tagad būs šāds:

const dataFetch = useRef(false)

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

Tagad vēlreiz palaidīsim mūsu lietotni un ar atvieglojumu atzīmēsim sarkano brīdinājumu pazušanu konsolē, un ieraudzīsim produktu sarakstu bez dublikātiem, tagad to ir 8, kā mēs to plānojām serverī. Tagad Redux DevTools darbības, kas ģenerējas pieprasījuma laikā, vairs neatkārtojas.

Atveriet savu studentu lietotni, un tajā failu StudentsList.jsx. Novērsiet problēmu ar dubulto pieprasījumu, saskaņā ar nodarbības materiālu, ja jums tāda ir.