Redux-da sorag dublikasiňy aradan aýyrmak

Bu sapak biz üçin peýdaly bolar, eger aplikasiýa işledilende bize maşgala soragy iberilýän bolsa, soňra bir id-a eýe bolan önümler jübütleri gelýär we netijede brauzer konsolunda gyzyl howp bildirişleri peýda bolýar.

Bunuň sebäbi React 18 wersiýasynda we ýokarda ösdüriş (dev) tertibinde, React.StrictMode ulanylanda komponentleriň montirlenmeginiň aýratynlygynda ýatýar (prodakşyn tertibinde bu barada hemmesi gowy diýilýär). Ilki komponent birikdirilýär, soňra aýrylyp ýene birikdirilýär. Şonuň üçin sorag iki gezek iberilýär.

Mümkin, siz bu materialy öwrenýän wagtyňyzda, React-daky bu goşa montirlenme birnäçe üýtgeşiklik geçirer. Biz tereňliklere dalmaly däldiris, ýöne ýönekeýlik bilen React gaby useRef ulanyp, bu ýalňyşlygy aýyrmaga kömek ederis.

Geliň önümler bilen aplikasiýamyzy açalyň, we onuň içindäki ProductsList.jsx faýlyny. Ona useRef gabygyny import edeliň:

import { useEffect, useRef } from 'react'

Indi bolsa useEffect bilen aşakdaky kodyň bölegini birnäçe üýtgedeliň:

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

Başlangyç üçin useRef üçin dataFetch diýen täze üýtgeýjini girizeliň. Başlangyçda onuň current aýratynlygyny false edeliň. Eger aplikasiýa eýýäm işledilen bolsa we, şonuň ýaly-da, sorag iberilen bolsa, onda current aýratynlygy eýýäm true bolar, diýmek biz diňe funksiýadan çykarys we maşgala soragy bolmaz. Şeýlelik bilen, ýokarda aýdylan kod bölegi indi şeýle bolar:

const dataFetch = useRef(false)

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

Indi aplikasiýamyzy ýene işledeliň we konsoldaky gyzyl howp bildirişleriniň ýogalandygyna ýeňillik bilen belgi edeliň, we dublikatsiz önümleriň sanawyny göreris, indi olar 8, serwerde meýilleşdirşimiz ýaly. Indi Redux DevTools-da sorag wagty döredilýän hereketler, ýene gaýtalanmaýar.

Studentler bilen aplikasiýaňyzy açyň, we onuň içindäki StudentsList.jsx faýlyny. Sapak materiallaryna laýyklykda, goşa sorag meselesini aradan aýyryň, eger size şeýle bolsa.