Eliminarea duplicării cererilor în Redux

Această lecție ne va fi utilă în cazul în care, la lansarea aplicației, se duplică trimiterea cererii de date, iar apoi vin perechi de produse cu același id și, ca urmare, apar avertismente roșii înfricoșătoare în consola browserului.

Cauza acestui lucru constă în particularitatea montării componentelor în React 18 și versiunile superioare în modul de dezvoltare (dev), atunci când se utilizează React.StrictMode (se spune că în modul production este totul în regulă cu asta). Mai întâi componenta se conectează, apoi se deconectează și se conectează din nou. De aceea și cererea este trimisă de două ori.

Este posibil ca atunci când veți studia acest material, această montare dublă în React să fi fost deja modificată cumva. Nu vom intra în detalii, ci pur și simplu vom folosi hook-ul React useRef, care ne va ajuta să ocolim acest neajuns.

Să deschidem aplicația noastră cu produse, iar în ea fișierul ProductsList.jsx. Să importăm în el hook-ul useRef:

import { useEffect, useRef } from 'react'

Și acum să modificăm puțin următorul bloc de cod cu useEffect:

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

Pentru început, să introducem o nouă variabilă dataFetch pentru useRef. Inițial, să setăm proprietatea sa current la false. Dacă aplicația a fost deja lansată și, în consecință, cererea a fost trimisă, atunci proprietatea current va fi deja true, ceea ce înseamnă că vom ieși pur și simplu din funcție și nu se va mai face o cerere repetată de date. Așadar, bucata de cod menționată mai sus acum va arăta astfel:

const dataFetch = useRef(false)

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

Acum să relansăm aplicația noastră și să remarcăm cu ușurare dispariția avertismentelor roșii din consolă și să vedem lista de produse fără duplicate, acum sunt 8, așa cum am planificat pe server. Acum în Redux DevTools, acțiunile generate la cerere, nu se mai repetă.

Deschideți aplicația voastră cu studenți, iar în ea fișierul StudentsList.jsx. Eliminați problema cu cererea dublă, conform materialului lecției, dacă aveți o astfel de problemă.