Enviando um thunk de um componente no Redux

Nesta lição, enviaremos um thunk para buscar produtos do componente React ProductsList.

Vamos agora abrir nosso aplicativo de produtos, e nele o arquivo ProductsList.jsx. Para começar, vamos adicionar à importação o thunk fetchProducts, que criamos:

import { selectAllProducts, fetchProducts } from './productsSlice'

Também vamos precisar do hook useDispatch para despachar nosso action creator e o hook useEffect porque aqui temos um efeito colateral, uma vez que estamos lidando com a rede, o que é uma API externa:

import { useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'

Agora, na primeira linha do código da função ProductsList, antes da declaração de products, vamos adicionar:

const dispatch = useDispatch()

Em seguida, ao obter os produtos do estado, também extrairemos o status da requisição:

const products = useSelector(selectAllProducts)
const productStatus = useSelector((state) => state.products.status)

E imediatamente após isso, vamos informar ao React usando o hook useEffect, que após a renderização do componente precisamos buscar os produtos. Aqui é que precisaremos do status da requisição, pois é importante que tal requisição seja enviada apenas uma vez:

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

Agora podemos iniciar nosso aplicativo, clicar em 'Products' no menu à esquerda. Ainda não veremos a lista de produtos, mas se abrirmos nosso Redux DevTools, no lado esquerdo da janela veremos as ações geradas automaticamente (como eu disse na lição anterior) products/fetchProducts/pending e fulfilled. Agora vamos clicar na action products/fetchProducts/fulfilled e no seu campo payload - aqui está nossa listinha de produtos! Uhuu, todos os nossos elos na cadeia - servidor, banco de dados, cliente e aplicativo Redux - estão funcionando de forma coordenada e conjunta. A propósito, como você pode ver, aqui também há uma propriedade meta, onde vemos o status da requisição.

Vamos prestar atenção em mais uma coisa: pode acontecer com você que pending e, consequentemente, fulfilled sejam exibidos duas vezes. Se for esse o caso, não se preocupe, falaremos sobre isso mais tarde.

Abra seu aplicativo de estudantes. Abra nele o arquivo StudentsList.jsx. Importe para ele os hooks necessários e o thunk de acordo com o material da lição.

Após estudar os materiais da lição, obtenha o status da requisição studentStatus e, em seguida, usando useEffect, despache fetchStudents apenas sob a condição de que o valor de studentStatus seja 'idle'.

Inicie seu aplicativo, clique no menu do aplicativo à esquerda em 'Students', e então inicie a extensão Redux DevTools no navegador; assim como nesta lição, você deve ver as ações com pending e fulfilled (e neste, o payload com os estudantes). Explore as abas da extensão.