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

Устранение дублирования запроса в Redux

Тег meter - вывод значений в диапазоне (HTML5)

Применение статуса запроса в Redux

Свойство background-size - размер картинки фона

Отправка action в Redux приложении

Получение данных продавцов в Redux

Изменение структуры стейта в Redux