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

Откройте ваше приложение со студентами, а в нем файл `StudentsList.jsx`. Устраните проблему с двойным запросом, согласно материалам урока, если у вас таковая имеется.

← →
↑