Redux-də təkrar sorğunun aradan qaldırılması

Bu dərs bizə proqram işə salındıqda məlumat sorğusunun təkrar göndərilməsi, daha sonra eyni id-ləri olan cüt məhsulların gəlməsi və nəticədə brauzerin konsolunda qorxulu qırmızı xəbərdarlıqların görünməsi halında faydalı olacaq.

Bunun səbəbi React 18 və daha yüksək versiyalarda, React.StrictMode istifadə edərkən, inkişaf (dev) rejimində komponentlərin quraşdırılması xüsusiyyətindədir (deyirlər ki, production rejimində bu problem yoxdur). Əvvəlcə komponent qoşulur, sonra ayrılır və yenidən qoşulur. Buna görə də sorğu iki dəfə göndərilir.

Ola bilsin ki, siz bu materialı öyrənəndə, React-də bu ikiqat quraşdırma artıq bir şəkildə dəyişdiriləcək. Biz detallara girməyəcəyik, sadəcə olaraq bu anlaşılmazlığın qarşısını almaqda bizə kömək edəcək React hook-u useRef-dən istifadə edəcəyik.

Gəlin məhsullarla olan proqramımızı açaq və onun içindəki ProductsList.jsx faylına keçək. Ora useRef hook-unu import edək:

import { useEffect, useRef } from 'react'

İndi isə useEffect olan növbəti kod blokunu bir az dəyişək:

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

Əvvəlcə useRef üçün yeni dataFetch dəyişənini təqdim edək. Əvvəlcə onun current xassəsini false olaraq təyin edək. Əgər proqram artıq işə salınıbsa və müvafiq olaraq sorğu göndərilibsə, onda current xassəti artıq true olacaq, deməli biz sadəcə funksiyadan çıxacıq və məlumatların təkrar sorğusu baş verməyəcək. Beləliklə, yuxarıda qeyd olunan kod parçası indi belə olacaq:

const dataFetch = useRef(false)

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

İndi proqramımızı yenidən işə salaq və konsoldakı qırmızı xəbərdarlıqların yox olmasını əminliklə qeyd edək, və serverdə planlaşdırdığımız kimi indi 8 ədəd olan, təkrarlanmayan məhsul siyahısını görək. İndi Redux DevTools-da sorğu zamanı yaranan action-lar artıq təkrarlanmır.

Tələbələrlə olan proqramınızı açın, onun içindəki StudentsList.jsx faylına keçin. Əgər varsa, dərsin materiallarına uyğun olaraq ikiqat sorğu problemini aradan qaldırın.