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:

products/ProductsList.jsximport { useEffect, useRef } from 'react'

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

products/ProductsList.jsxuseEffect(() => {
  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:

products/ProductsList.jsxconst 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í.