Reduxda so'rov takrorlanishini bartaraf etish

Ushbu dars bizga quyidagi holatda foydali bo'ladi, agar ilovani ishga tushirganda ma'lumotlar so'rovi ikki marta yuborilsa va keyin bir xil id ga ega bo'lgan mahsulot juftlari kelib tushsa va natijada brauzer konsolida qizil ogohlantirishlar paydo bo'lsa.

Buning sababi React 18 va undan yuqori versiyalarda komponentlarni o'rnatishning xususiyatida yotadi, ishlab chiqish rejimida (dev), React.StrictMode ishlatilganda (isHLab chiqarish rejimida hammasi yaxshi ekanligi aytiladi). Avval komponent ulanadi, keyin ulanadi va yana ulanadi. Shuning uchun so'rov ikki marta yuboriladi.

Ehtimol, siz ushbu materialni o'rganayotganingizda, React dagi bu qo'shma o'rnatish allaqachon qandaydir tarzda o'zgartirilgan bo'ladi. Biz chuqurlarga sho'ng'imasdan, shunchaki hozircha React ning useRef hookidan foydalanamiz, bu bizga ushbu notanishlikni engishda yordam beradi.

Keling, mahsulotlar bilan ilovamizni ochaylik, va unda ProductsList.jsx faylini. Unga useRef hookini import qilamiz:

import { useEffect, useRef } from 'react'

Va endi useEffect bilan keyingi kod blokini biroz o'zgartiramiz:

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

Boshlash uchun useRef uchun yangi dataFetch o'zgaruvchisini kiritamiz. Dastlab uning current xususiyatini false ga o'rnatamiz. Agar ilova allaqachon ishga tushirilgan bo'lsa va, mos ravishda, so'rov yuborilgan bo'lsa, current xususiyati allaqachon true bo'ladi, demak biz shunchaki funksiyadan chiqamiz va ma'lumotlarning takroriy so'rovi bo'lmaydi. Shunday qilib, yuqorida tilga olingan kod parchasi endi quyidagicha bo'ladi:

const dataFetch = useRef(false)

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

Endi ilovamizni qayta ishga tushiramiz va konsoldagi qizil ogohlantirishlar yo'qolganidan xursand bo'lamiz, va dublikatsiz mahsulotlar ro'yxatini ko'ramiz, endi ular 8 ta, serverda rejalashtirganimizdek. Endi Redux DevTools da so'rov paytida yaratiladigan actionlar, endi takrorlanmaydi.

Talabalar bilan ilovingizni oching, va unda StudentsList.jsx faylini. Agar sizda shunday muammo bo'lsa, dars materiallariga muvofiq, qo'shma so'rov muammosini bartaraf eting.