Eliminimi i dublikimit të kërkesave në Redux

Ky mësim do të na jetë i dobishëm në rastin kur, gjatë nisjes së aplikacionit, kemi dublikim të dërgimit të kërkesës për të dhëna, dhe pastaj vijnë çifte produkte me id të njëjta, dhe si pasojë shfaqen paralajmërime të tmerrshme të kuqe në konsolën e shfletuesit.

Shkaku i kësaj qëndron në veçorinë e montimit të komponentëve në React 18 version dhe më lart në modalitetin e zhvillimit (dev), kur përdoret React.StrictMode (thonë se në modalitetin production është në rregull me këtë). Fillimisht komponenti lidhet, pastaj shkëputet dhe përsëri lidhet. Prandaj edhe kërkesa dërgohet dy herë.

Është e mundur që kur ju të studioni këtë material, ky montim i dyfishtë në React tashmë të jetë ndryshuar në një mënyrë. Ne nuk do thellohemi në gjëra komplekse, thjesht do përdorim hookun React useRef, i cili do të na ndihmojë të anashkalojmë këtë keqkuptim.

Le të hapim aplikacionin tonë me produktet, dhe në të skedarin ProductsList.jsx. Le të importojmë në të hookun useRef:

import { useEffect, useRef } from 'react'

Dhe tani le të ndryshojmë pak bllokun e mëposhtëm të kodit me useEffect:

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

Për fillim, le të vendosim një variabël të re dataFetch për useRef. Fillimisht do ta vendosim vetinë e saj current në false. Nëse aplikacioni tashmë është nisur dhe, në përputhje me rrethanat, kërkesa ishte dërguar, atëherë vetia current tashmë do të jetë true, që do të thotë ne thjesht do të dalim nga funksioni dhe nuk do të ketë dublikim të kërkesës së të dhënave. Pra, pjesa e përmendur më sipër e kodit tani do të jetë kështu:

const dataFetch = useRef(false)

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

Tani le të nisim përsëri aplikacionin tonë dhe me lehtësim të vërejmë zhdukjen e paralajmërimeve të kuqe në konsolë, dhe të shohim listën e produkteve pa dublika, tani janë 8, ashtu siç e kishim planifikuar në server. Tani në Redux DevTools veprimet, të gjeneruara gjatë kërkesës, nuk përsëriten më.

Hapni aplikacionin tuaj me studentët, dhe në të skedarin StudentsList.jsx. Eliminoni problemin me kërkesën e dyfishtë, sipas materialeve të mësimit, nëse e keni të tillë.