Kuondoa Maombi Yaliyoingizwa Mara Mbili katika Redux

Somo hili litakuwa muhimu kwetu ikiwa wakati wa kuzindua programu yetu maombi yanatumwa mara mbili, kisha bidhaa huja kwa jozi zenye kitambulisho kilekile, na matokeo yake onyo lenye rangi nyekundu linaonekana kwenye console ya kivinjari.

Sababu ya hii iko katika hulka ya kuunganishwa kwa vifaa (components) katika React 18 na toleo la juu zaidi katika hali ya ukuzaji (dev), wakati wa kutumia React.StrictMode (inasemekana, katika hali ya production hakuna tatizo na hili). Kwanza kifaa huunganishwa, kisha hutenganishwa na kisha kuunganishwa tena. Kwa hiyo ombi linatumwa mara mbili.

Inawezekana, wakati unaposoma nyenzo hii, kuunganishwa huku mara mbili katika React kutakuwa kimebadilishwa kwa namna fulani. Hatutaingia kwenye maelezo ya chini, bali tutatumia mdudu wa React useRef, ambao atatusaidia kuepuka hitilafu hii.

Wacha tufungue programu yetu ya bidhaa, na ndani yake faili ProductsList.jsx. Tuingize ndani yake mdudu useRef:

import { useEffect, useRef } from 'react'

Na sasa tubadilishe kidogo kipande kinachofuata cha msimbo na useEffect:

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

Kwanza, tuanzishe kigeu kipya dataFetch kwa useRef. Mwanzoni tuweke sifa yake current kuwa false. Ikiwa programu tayari imezinduliwa na, ipasavyo, ombi limetumwa, basi sifa current itakuwa true, maana yake tutatoka tu kwenye kitendo na ombi la data halitafanyika tena. Kwa hiyo, kipande cha msimbo kilichotajwa hapo juu sasa kitakuwa kama hiki:

const dataFetch = useRef(false)

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

Sasa tuanzishe tena programu yetu na kuthibitisha kwa faraja kutoweka kwa onyo nyekundu kwenye console, na kuona orodha ya bidhaa bila nakala, sasa kuna 8, kama tulivyopanga kwenye seva. Sasa katika Redux DevTools vitendo, vinavyotokana na ombi, havijirudii tena.

Fungua programu yako ya wanafunzi, na ndani yake faili StudentsList.jsx. Ondoa shida ya ombi mara mbili, kulingana na nyenzo za somo, ikiwa inatokea kwako.