Reduxтегиндеги сураныштарды дубликациялоодон арылтуу

Бул сабак бизге колдонмону иштеткенде, эгерде маалыматтарга болгон сураныш дубликацияланып жиберилсе, анан бирдей id бар өнүмдөрдүн жуптары келип, натыйжада браузердин консолунда коркунучтуу кызыл эскертүүлөр пайда болсо, пайдалуу болот.

Мунун себеби React 18 жана андан жогорку версиялардагы компоненттерди орнотуунун өзгөчөлүгүндө жаткан, өнүктүрүү (dev) режиминде, React.StrictMode колдонулган учурда (production режиминде бул жагынан баары жакшы деп айтышат). Адегенде компонент туташып, анан ажырап, кайрадан туташат. Ошондуктан сураныш да эки жолу жиберилет.

Балким, сиз бул материалды үйрөнүп жатканда, 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 файлын ачыңыз. Эгерде сизде мындай көйгөй бар болсо, сабактын материалына ылайык, кош суроо маселесин чечиңиз.