Eliminace duplicitních požadavků v Reduxu

Tato lekce se nám bude hodit v případě, že se při spuštění aplikace duplikuje odeslání požadavku na data, a poté přicházejí páry produktů se stejnými id, a v důsledku toho se v konzoli prohlížeče objevují strašlivá červená varování.

Důvodem je zvláštnost mountování komponent v Reactu 18 a vyšší ve vývojovém režimu (dev), při použití React.StrictMode (říká se, že v production režimu je s tím vše v pořádku). Komponenta se nejprve připojí, poté odpojí a znovu připojí. Proto se požadavek odešle dvakrát.

Je možné, že až budete studovat tento materiál, toto dvojité mountování v Reactu již bude nějak změněno. Nebudeme se pouštět do podrobností, ale jednoduše použijeme React hook useRef, který nám pomůže toto nedorozumění obejít.

Pojďme otevřít naši aplikaci s produkty a v ní soubor ProductsList.jsx. Importujme do něj hook useRef:

import { useEffect, useRef } from 'react'

A nyní mírně upravíme následující blok kódu s useEffect:

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

Nejprve zavedeme novou proměnnou dataFetch pro useRef. Na začátku nastavíme její vlastnost current na false. Pokud se aplikace již spustila a podle toho byl požadavek odeslán, pak vlastnost current již bude true, což znamená, že z funkce jednoduše odejdeme a k opakovanému požadavku na data nedojde. Takže výše zmíněný kousek kódu nyní bude vypadat takto:

const dataFetch = useRef(false)

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

Nyní znovu spustíme naši aplikaci a s úlevou zaznamenáme zmizení červených varování v konzoli, a uvidíme seznam produktů bez duplikátů, nyní jich je 8, jak jsme naplánovali na serveru. Nyní se v Redux DevTools akce generované při požadavku již neopakují.

Otevřete vaši aplikaci se studenty, a v ní soubor StudentsList.jsx. Odstraňte problém s dvojitým požadavkem podle materiálů lekce, pokud jej máte.