Елиминирање на дуплирање на барања во 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. Иницијално да го поставиме нејзиниот property current на false. Доколку апликацијата веќе е стартувана и, соодветно, барањето е испратено, тогаш property-то current веќе ќе биде true, што значи дека ние едноставно ќе излеземе од функцијата и повторното барање на податоци нема да се случи. Значи, горенаведениот дел од кодот сега ќе изгледа вака:

const dataFetch = useRef(false)

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

Сега повторно да ја стартуваме нашата апликација и со олеснување да забележиме исчезнување на црвените предупредувања во конзолата, и да го видиме листата на производи без дупликати, сега ги има 8, како што планиравме на серверот. Сега во Redux DevTools action-ите, генерирани при барање, повеќе не се повторуваат.

Отворете ја вашата апликација со студенти, а во неа датотеката StudentsList.jsx. Елиминирајте го проблемот со двојно барање, согласно материјалите од лекцијата, доколку таков го имате.