Päringu duubeldamise kõrvaldamine Reduxis

See tund on meile kasulik juhul, kui rakenduse käivitamisel duubeldub andmete päringu saatmine ja seejärel tulevad paarid toodetest id-dega, mille tulemusena ilmuvad brauseri konsooli hirmutavad punased hoiatused.

Selle põhjuseks on React 18 ja uuemate versioonide komponentide mountimise eripära arendusrežiimis (dev), kui kasutatakse React.StrictMode (räägitud, et production-režiimis on kõik sellega korras). Esmalt mountitakse komponent, seejärel demountitakse ja mountitakse uuesti. Seetõttu saadetakse päring kaks korda.

Võimalik, et kui te seda materjali õpite, on see topeltmountimine Reactis juba kuidagi muutunud. Me ei süvene põhjalikult, vaid lihtsalt kasutame React hooki useRef, mis aitab meil sellest mööda hiilida.

Avame oma toodete rakenduse, ja selles faili ProductsList.jsx. Impordime sellesse hooki useRef:

import { useEffect, useRef } from 'react'

Ja nüüd muudame veidi järgmist koodiblokki useEffect-iga:

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

Alustuseks tutvustame uut muutujat dataFetch jaoks useRef. Algselt määrame selle omaduse current väärtuseks false. Kui rakendus on juba käivitatud ja vastavalt sellele on päring saadetud, siis omadus current on juba true, mis tähendab, et me lihtsalt väljume funktsioonist ja andmete uuesti pärimist ei toimu. Niisiis, eelmainitud koodijupp on nüüd selline:

const dataFetch = useRef(false)

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

Nüüd käivitame oma rakenduse uuesti ja leevenduse märgates kaovad punased hoiatused konsoolist, ja näeme toodete loendit ilma dupliteta, nüüd on neid 8, nagu me serveris plaanisime. Nüüd Redux DevToolsis päringuga kaasnevad actionid enam ei kordu.

Avage oma õpilaste rakendus, ja selles fail StudentsList.jsx. Kõrvaldage topeltpäringu probleem vastavalt tunni materjalile, kui teil selline esineb.