Կրկնվող հարցումների վերացում 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])

Սկզբից ներմուծենք dataFetch նոր փոփոխականը useRef-ի համար: Սկզբնապես դրա 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 ֆայլը: Վերացրեք կրկնակի հարցման խնդիրը, համաձայն դասի նյութերի, եթե ձեր մոտ այդպիսին կա: