Eliminación de la duplicación de solicitudes en Redux

Esta lección nos será útil en el caso de que al iniciar la aplicación se duplique el envío de la solicitud de datos, y luego lleguen pares de productos con los mismos id, y, como consecuencia, aparezcan terribles advertencias rojas en la consola del navegador.

La razón de esto radica en una característica del montaje de componentes en React 18 y versiones superiores en modo desarrollo (dev), cuando se utiliza React.StrictMode (dicen que en modo production todo está bien con esto). Primero el componente se monta, luego se desmonta y se vuelve a montar. Por eso la solicitud se envía dos veces.

Es posible que cuando estudies este material, este doble montaje en React ya haya sido modificado de alguna manera. No profundizaremos en detalles, simplemente usaremos el hook de React useRef, que nos ayudará a evitar este inconveniente.

Abramos nuestra aplicación de productos, y en ella el archivo ProductsList.jsx. Importemos en él el hook useRef:

import { useEffect, useRef } from 'react'

Y ahora modifiquemos un poco el siguiente bloque de código con useEffect:

useEffect(() => {
	if (productStatus === 'idle') {
		dispatch(fetchProducts())
	}
}, [productStatus, dispatch])

Para empezar, introduzcamos una nueva variable dataFetch para useRef. Inicialmente establezcamos su propiedad current en false. Si la aplicación ya se había iniciado y, respectivamente, la solicitud había sido enviada, entonces la propiedad current ya será true, lo que significa que simplemente saldremos de la función y no se producirá una nueva solicitud de datos. Entonces, el fragmento de código mencionado anteriormente ahora será así:

const dataFetch = useRef(false)

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

Ahora iniciemos nuevamente nuestra aplicación y con alivio notemos la desaparición de las advertencias rojas en la consola, y veamos la lista de productos sin duplicados, ahora hay 8, como lo habíamos planeado en el servidor. Ahora en Redux DevTools las acciones, generadas durante la solicitud, ya no se repiten.

Abra su aplicación de estudiantes, y en ella el archivo StudentsList.jsx. Elimine el problema de la doble solicitud, de acuerdo con el material de la lección, si es que lo tiene.