Reduxда сурўр такрорланишини бартараф этиш

Бущ дарс бизга илова ишга туширилганда, маълумотлар сурўри икки марта юборилиши, сўнгра бир хил id га эга бўлган махсулотлар жуфтлари келиши ва натижада браузер консолида қўрқинчли қизил огоҳлантиришлар пайдо бўлиши ҳолатида фойдали бўлади.

Бунинг сабаби React 18 ва ундан юқори версияларда ишлаб чиқариш (dev) режимида, React.StrictMode ишлатилганда компонентларни ўрнатишнинг хусусиятида ётар (ишлаб чиқариш режимида бу билан ҳаммаси яхши дейишади). Аввал компонент уланади, сўнгра ўчирилади ва яна уланади. Шу сабабдан сурўр икки марта юборилади.

Эҳтимол, сиз бу материални ўрганаётган вақтингизда, React даги бу икки марта ўрнатиш қандайдир шаклда ўзгартирилган бўлади. Биз чуқурликка түшмаймиз, балки бу нотўғриликдан ўтиш учун бизга ёрдам берадиган React ҳуки useRef дан фойдаланамиз.

Келгила, махсулотлар билан иловамизни ochамиз, унинг ичидаги 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 да сурўр тарафдан яратилувчи экшенлар бошқа такрорланмайди.

Студентлар билан иловангизни ochинг, унинг ичидаги StudentsList.jsx файлини. Агар сизда мавжуд бўлса, дарс материалларига асосан, икки марта сурўр билан муаммони бартараф этинг.