Redux'ta Yinelenen İsteklerin Ortadan Kaldırılması

Bu ders, uygulama başlatıldığında veri isteklerinin yinelenen gönderimleri olması ve ardından aynı id'lere sahip ürün çiftlerinin gelmesi ve sonuç olarak tarayıcı konsolunda korkunç kırmızı uyarıların belirmesi durumunda işimize yarayacak.

Bunun nedeni, React 18 ve üzeri sürümlerde, geliştirme modunda (dev) ve React.StrictMode kullanılırken bileşenlerin monte edilme özelliğinde yatmaktadır (production modunda bu sorunun olmadığı söyleniyor). İlk olarak bileşen bağlanır, ardından bağlantısı kesilir ve tekrar bağlanır. Bu nedenle istek iki kez gönderilir.

Muhtemelen siz bu materyali incelerken, React'taki bu çift montaj işlemi bir şekilde değiştirilmiş olacak. Derinlere inmeyeceğiz, bunun yerine bu sorunu aşmamıza yardımcı olacak React kancası useRef'i kullanacağız.

Hadi ürünlerle olan uygulamamızı açalım ve içindeki ProductsList.jsx dosyasını açalım. İçine useRef kancasını içe aktaralım:

import { useEffect, useRef } from 'react'

Ve şimdi useEffect ile olan sonraki kod bloğunu biraz değiştirelim:

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

Başlangıç olarak useRef için yeni bir dataFetch değişkeni tanımlayalım. Başlangıçta onun current özelliğini false olarak ayarlayalım. Uygulama zaten başlatıldıysa ve buna bağlı olarak istek gönderildiyse, current özelliği zaten true olacaktır, bu da fonksiyondan çıkacağımız ve veri isteğinin tekrarlanmayacağı anlamına gelir. Yukarıda bahsedilen kod parçası artık şu şekilde olacak:

const dataFetch = useRef(false)

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

Şimdi uygulamamızı tekrar başlatalım ve konsoldaki kırmızı uyarıların kaybolmasını rahatlıkla not edelim ve sunucuda planladığımız gibi artık 8 tane, kopyaları olmayan bir ürün listesi görelim. Artık Redux DevTools'ta istek sırasında oluşturulan eylemler tekrarlanmıyor.

Öğrenci uygulamanızı açın ve içindeki StudentsList.jsx dosyasını açın. Ders materyallerine göre, eğer varsa, çift istek problemini giderin.