Duplisering van versoek in Redux uitskakel

Hierdie les sal vir ons nuttig wees in die geval waar die stuur van 'n dataversoek dupliseer wanneer ons die applikasie begin, en dan kom daar paar produkte met dieselfde id aan, en gevolglik verskyn daar vreeslike rooi waarskuwings in die blaaier se konsole.

Die rede hiervoor lê in die eienskap van die montering van komponente in React 18 weergawe en hoër in ontwikkelingsmodus (dev), wanneer React.StrictMode gebruik word (hulle sê, in produksiemodus is alles ok hiermee). Eers word die komponent gekoppel, dan ontkoppel en weer gekoppel. Daarom word die versoek twee keer gestuur.

Miskien, wanneer jy hierdie materiaal bestudeer, sal hierdie dubbele montering in React al op een of ander manier verander wees. Ons sal nie in die dieptes afdaal nie, maar eenvoudig vir nou van die React hook useRef gebruik maak, wat ons sal help om hierdie misverstand te oorkom.

Kom ons maak ons applikasie met produkte oop, en daarin die lêer ProductsList.jsx. Laat ons die hook useRef daarin invoer:

import { useEffect, useRef } from 'react'

En laat ons nou die volgende blok kode met useEffect effens verander:

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

Om mee te begin, laat ons 'n nuwe veranderlike dataFetch vir useRef invoer. Stel aanvanklik sy eienskap current in na false. As die applikasie reeds begin het en, gevolglik, die versoek was gestuur, dan sal die eienskap current reeds true wees, wat beteken ons verlaat eenvoudig die funksie en 'n herhaalde dataversoek sal nie plaasvind nie. So, die bogenoemde stukkie kode sal nou só lyk:

const dataFetch = useRef(false)

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

Laat ons nou weer ons applikasie begin en met verligting die verdwyning van rooi waarskuwings in die konsole waarneem, en sien die lys produkte sonder duplikate, nou is daar 8, soos ons op die bediener beplan het. Nou in Redux DevTools is die aksies, gegenereer by versoek, nie meer herhaal nie.

Maak jou applikasie met studente oop, en daarin die lêer StudentsList.jsx. Skakel die probleem met die dubbele versoek uit, volgens die lesmateriaal, as jy een het.