Дар 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. Мушкилии дархости дукаратаро, мувофиқи маводи дарс, бартараф кунед, агар чунин мушкиле дошта бошед.