Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Não consegui carregar as categorias sem ser na página Home

Referente ao curso React: entendendo Middlewares com Redux Thunk, no capítulo Criando Toasts e atividade Thunk sem async

por Dilon Henrique Souza da Silva
| 95.4k xp | 19 posts
Dev Fullstack

Olá! Tudo bem?

Nesta última aula, ficou meio vago como fazer para carregar as categorias (e itens) assim que a página é carregada, independente da página renderizada. Achei que utilizando algo como window.onload ou window.document no addCase() fosse resolver, mas nenhum deles trigger as ações. Depois disso, imaginei fazer a chamada pra Api e passar o resultado para o state, mas como não passei da primeira parte, não pude testar.

Uma solução que consegui foi colocar o dispatch dessas actions no index.js da pasta src, mas me pareceu gambiarra, já que esse não é o papel desse arquivo.

Alguma sugestão ou dica?

1 resposta
por Luiz Fernando Ribeiro
| 119.4k xp | 128 posts
Instrutor Desenvolvedor Front-End

Fala Dilon, tudo certo?

O vídeo que você veio até esse fórum é o "Thunk sem async", mas vou considerar que você está falando do "Aplicando o Toast" porque é nele que falamos sobre carregar categorias.

Para achar o problema, tenta os seguintes passos:

  • Tente acessar o Redux Devtools (explicado no curso 2 da formação redux) e veja se a ação categorias/buscar/pending está sendo executada, se sim, o thunk está sendo ativado. Nesse caso, verifique se após esta action está sendo executada categorias/buscar/fullfilled (sucesso) ou categorias/buscar/rejected (erro).
    • Se não existir nem o pending, significa que a action não está sendo executada, nesse caso, faça o que eu escrevi no item 3 dessa lista.
    • Se estiver rejected, significa que o servidor não está rodando, então execute o servidor em outro terminal com yarn server, npm run server ou pnpm run server.
    • Se estiver fullfilled, significa que o servidor e a action estão sendo disparadas com sucesso, então o erro provavelmente está ou em guardar os dados no redux ou em consumir os dados no React.
      • Nesse caso, verifique na aba State do Redux DevTools se categorias está com um array de objetos ou se é um array vazio.
      • Se for um array vazio o problema é ao guardar.
      • Se estiver preenchido, significa que o problema é na hora de consumir.
  • Caso a opção acima não resolva ou se você não sabe usar o Redux Devtools, veja a aba Network (ou Rede) dento do DevTools do seu navegador se está chamando /categorias. Se sim, o problema está no retorno da chamada, se não (provavelmente é não), você terá que chamar a action que está dentro do addCase, no caso, é buscarCategorias;
  • Caso a action buscarCategorias não esteja sendo executada, ela deveria estar sendo disparado no useEffect da página Home, você pode conferir esse código sendo feito na aula 3.2 - createAsyncThunk ou ver o código clicando aqui;

Se mesmo assim não estiver ainda não for resolvido, você poderia compartilhar o repositório com o código com problema ou algum erro no console se tiver?

Bons estudos!