Pyyntöjen kaksoiskappaleiden poistaminen Reduxissa

Tästä oppitunnista on hyötyä tilanteessa, jossa sovelluksen käynnistyessä tietojen hakupyyntö lähetetään kahdesti, minkä jälkeen tulee pari tuotetta, joilla on samat id:t, ja seurauksena ovat pelottavat punaiset varoitukset selaimen konsolissa.

Tämän syynä on Reactin 18 version ja uudemmien komponenttien liittämisen erityispiirre kehitystilassa (dev), kun käytetään React.StrictMode:ta (kerrotaan, että tuotantotilassa (production) kaikki on kunnossa tämän suhteen). Ensin komponentti liitetään, sitten irrotetaan ja liitetään uudelleen. Siksi pyyntö lähetetään kahdesti.

On mahdollista, että opiskellessasi tätä materiaalia, tämä kaksoisliittäminen Reactissa on jo muuttunut jollakin tavalla. Emme syvenny yksityiskohtiin, vaan käytämme yksinkertaisesti Reactin useRef -koukku, jonka avulla voimme kiertää tämän epäselvyyden.

Avataan tuotesovelluksemme, ja siellä tiedosto ProductsList.jsx. Tuodaan siihen useRef -koukku:

import { useEffect, useRef } from 'react'

Ja nyt muokataan hieman seuraavaa koodilohkoa useEffect:lla:

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

Aluksi luomme uuden muuttujan dataFetch useRef:lle. Asetamme sen current-ominaisuuden aluksi arvoon false. Jos sovellus on jo käynnistetty ja pyyntö on vastaavasti lähetetty, current-ominaisuus on jo true, mikä tarkoittaa, että poistumme funktiosta ja tietojen kaksoispyyntöä ei tapahdu. Joten, edellä mainittu koodinpala on nyt tällainen:

const dataFetch = useRef(false)

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

Käynnistetään nyt sovelluksemme uudelleen ja huomaamme helpotuksella punaisten varoitusten katoamisen konsolista, ja näemme tuoteliston ilman kaksoiskappaleita, nyt niitä on 8, kuten palvelimella suunnittelimme. Nyt Redux DevToolsissa pyyntöön liittyvät toiminnot eivät enää toistu.

Avaa opiskelijasovelluksesi, ja siellä tiedosto StudentsList.jsx. Poista kaksoispyynnön ongelma oppitunnin materiaalin mukaisesti, jos sellainen sinulla on.