Премахване на дублиране на заявка в Redux

Този урок ще ни бъде полезен в случай, че при стартиране на приложението се дублира изпращането на заявка за данни, а след това пристигат двойки продукти с еднакви id, и като следствие се появяват страшни червени предупреждения в консолата на браузъра.

Причината за това се крие в особеността на монтирането на компоненти в React 18 версия и по-високи в режим на разработка (dev), при използване на React.StrictMode (казват, че в production режим всичко е наред с това). Първо компонентът се свързва, след това се изключва и отново се свързва. Затова и заявката се изпраща два пъти.

Възможно е, когато изучавате този материал, това двойно монтиране в React вече да е променено по някакъв начин. Няма да навлизаме в дълбоки детайли, а просто ще използваме React hook useRef, който ще ни помогне да заобиколим това недоразумение.

Нека отворим нашето приложение с продукти, а в него файла ProductsList.jsx. Импортираме в него hook 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. Премахнете проблема с двойната заявка, според материала от урока, ако имате такъв.