Eliminação de duplicação de requisição no Redux

Esta lição será útil para nós no caso em que, ao iniciar a aplicação, a requisição de dados é enviada de forma duplicada, e então chegam pares de produtos com os mesmos id, e, como consequência, aparecem terríveis avisos vermelhos no console do navegador.

A causa disso está em uma característica de montagem de componentes no React 18 e superior no modo de desenvolvimento (dev), ao usar React.StrictMode (dizem que no modo de produção está tudo bem com isso). Primeiro, o componente é montado, depois desmontado e montado novamente. Portanto, a requisição é enviada duas vezes.

Possivelmente, quando você estiver estudando este material, esta montagem dupla no React já terá sido alterada de alguma forma. Nós não vamos nos aprofundar em detalhes complexos, mas simplesmente usaremos o hook do React useRef, que nos ajudará a contornar este problema.

Vamos abrir nossa aplicação com produtos, e nela o arquivo ProductsList.jsx. Vamos importar o hook useRef nele:

import { useEffect, useRef } from 'react'

E agora vamos modificar um pouco o seguinte bloco de código com useEffect:

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

Para começar, vamos introduzir uma nova variável dataFetch para useRef. Inicialmente, vamos definir sua propriedade current como false. Se a aplicação já tiver sido iniciada e, consequentemente, a requisição tiver sido enviada, então a propriedade current já será true, o que significa que simplesmente sairemos da função e o reenvio da requisição de dados não ocorrerá. Então, o trecho de código mencionado acima agora ficará assim:

const dataFetch = useRef(false)

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

Agora vamos iniciar nossa aplicação novamente e com alívio notar o desaparecimento dos avisos vermelhos no console, e ver a lista de produtos sem duplicatas, agora são 8, como planejamos no servidor. Agora no Redux DevTools, as actions, geradas durante a requisição, não se repetem mais.

Abra sua aplicação com estudantes, e nela o arquivo StudentsList.jsx. Elimine o problema com a requisição dupla, de acordo com o material da lição, se você tiver esse problema.