Выдаленне дублявання запыту ў 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 экшны, якія генеруюцца пры запыце, больш не паўтараюцца.

Адчынiце ваш дадатак са студэнтамі, а ў ім файл StudentsList.jsx. Выдаліце праблему з двайным запытам, згодна матэрыялаў урока, калі ў вас такая маецца.