Устранение дублирования запроса в 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 экшены, генерируемые при запросе, больше не повторяются.