Елиминисање дуплирања захтева у Redux-у

Овај час ће нам користити у случају да се при покретању апликације дуплира слање захтева за подацима, па затим стижу парови производа са истим id-овима, и као последица појављују се страшни црвени упозорења у конзоли прегледача.

Узрок овоме лежи у карактеристици монтирања компоненти у React 18 верзији и изнад у режиму развоја (dev), при коришћењу React.StrictMode (кажу, у production режиму све је ок са овим). Прво се компонента прикључи, онда се искључи и поново прикључи. Зато и захтев шаље два пута.

Могуће је да ће, када будете учили овај материјал, ово двоструко монтирање у React већ бити промењено на неки начин. Нећемо залазити у детаље, већ ћемо само за сада искористити React кукицу useRef, која ће нам помоћи да заобиђемо овај проблем.

Хајде да отворимо нашу апликацију са производима, а у њој фајл ProductsList.jsx. Увезимо у њега кукицу useRef:

products/ProductsList.jsximport { useEffect, useRef } from 'react'

А сада мало променимо следећи блок кода са useEffect:

products/ProductsList.jsxuseEffect(() => {
  if (productStatus === 'idle') {
    dispatch(fetchProducts())
  }
}, [productStatus, dispatch])

За почетак уведимо нову променљиву dataFetch за useRef. У почетку поставимо њено својство current на false. Ако се апликација већ покретала и, самим тим, захтев био послат, онда ће својство current већ бити true, што значи да ћемо једноставно изаћи из функције и понављање захтева за подацима се неће десити. Дакле, поменути делић кода сада ће изгледати овако:

products/ProductsList.jsxconst dataFetch = useRef(false)

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

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