Redux-те сұраныстың қайталануын жою

Бұл сабақ бізге пайдалы болады, егер бағдарламаны іске қосқан кезде деректер сұранысының жіберілуі қайталанса, содан кейін бірдей id-мен өнімдер жұптары келсе және нәтижесінде браузер консолінде қорқынышты қызыл ескертулер пайда болса.

Мұның себебі React 18 нұсқасы және одан жоғары даму режимінде (dev), React.StrictMode қолданған кезде компоненттерді орнату ерекшелігінде жатыр (өндіріс режимінде бәрі жақсы дейді). Алдымен компонент қосылады, содан кейін ажыратылып, қайтадан қосылады. Сондықтан сұраныс екі рет жіберіледі.

Мүмкін, сіз бұл материалды зерттейтін кезде, React-тегі бұл қос орнату біршама өзгертілген болар. Біз теренге батпай, жай ғана осы түсініксіздікті жеңуге көмектесетін React хукі useRef пайдаланамыз.

Өнімдеріміз бар қолданушы бағдарламамызды ашып, ондағы ProductsList.jsx файлын ашайық. Оған useRef хукін импорттайық:

import { useEffect, useRef } from 'react'

Енді useEffect бар келесі код блогын сәл өзгертейік:

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

Алдымен useRef үшін жаңа dataFetch айнымалысын енгіземіз. Бастапқыда оның current қасиетін false мәніне орнатамыз. Егер бағдарлама қазірдің өзінде іске қосылған болса және, сәйкесінше, сұраныс жіберілген болса, онда current қасиеті true болады, демек біз жай функциядан шығып қаламыз және деректердің қайталанатын сұранысы болмайды. Жоғарыда аталған код үзіндісі енді келесідей болады:

const dataFetch = useRef(false)

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

Енді қолданушы бағдарламамызды қайтадан іске қосамыз және консольдегі қызыл ескертулердің жоғалуын жеңілдікпен байқаймыз, және дубльсіз өнімдер тізімін көреміз, енді олар 8, дәл серверде жоспарлағанымыздай. Енді Redux DevTools-те сұраныс кезінде генерацияланатын экшндер қайталанбайды.

Студенттеріңіз бар қолданушы бағдарламаңызды ашыңыз, ондағы StudentsList.jsx файлын ашыңыз. Егер сізде мұндай проблема болса, сабақ материалына сәйкес қос сұраныс мәселесін жойыңыз.