Eliminacja duplikowania zapytań w Reduksie

Ta lekcja przyda nam się w przypadku, gdy przy uruchomieniu aplikacji duplikuje się wysłanie zapytania o dane, a następnie przychodzą pary produktów z identycznymi id, i w konsekwencji pojawiają się straszne czerwone ostrzeżenia w konsoli przeglądarki.

Przyczyną tego jest specyfika montowania komponentów w React 18 wersji i wyższych w trybie programistycznym (dev), przy użyciu React.StrictMode (mówi się, że w trybie production wszystko z tym w porządku). Najpierw komponent jest podłączany, potem odłączany i ponownie podłączany. Dlatego zapytanie jest wysyłane dwukrotnie.

Być może, gdy będziesz studiować ten materiał, to podwójne montowanie w React już zostanie w jakiś sposób zmienione. Nie będziemy zagłębiać się w szczegóły, a po prostu na razie skorzystamy z hooka React useRef, który pomoże nam obejść to nieporozumienie.

Otwórzmy naszą aplikację z produktami, a w niej plik ProductsList.jsx. Zaimportujmy do niego hook useRef:

import { useEffect, useRef } from 'react'

A teraz zmodyfikujmy nieco następujący blok kodu z useEffect:

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

Na początek wprowadźmy nową zmienną dataFetch dla useRef. Początkowo ustawmy jej właściwość current na false. Jeśli aplikacja już się uruchamiała i, odpowiednio, zapytanie zostało wysłane, to właściwość current będzie już true, oznacza to, że po prostu wyjdziemy z funkcji i ponowne zapytanie o dane nie nastąpi. A zatem, powyższy kawałek kodu teraz będzie wyglądał tak:

const dataFetch = useRef(false)

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

Teraz ponownie uruchommy naszą aplikację i z ulgą zauważmy zniknięcie czerwonych ostrzeżeń w konsoli, i zobaczmy listę produktów bez duplikatów, teraz jest ich 8, tak jak zaplanowaliśmy na serwerze. Teraz w Redux DevTools akcje, generowane przy zapytaniu, już się nie powtarzają.

Otwórz twoją aplikację ze studentami, a w niej plik StudentsList.jsx. Wyeliminuj problem z podwójnym zapytaniem, zgodnie z materiałami lekcji, jeśli takowy występuje.