Um momento
Aula 33
Cursos / CRUD com o Redux (e React Native)
Investigação de um Problema Estranho

Summary

Resumo do Problema com o Aplicativo

Contexto

Durante a gravação de um vídeo, o autor testou um aplicativo que envolve a adição e exclusão de posts utilizando uma API. Um problema peculiar foi identificado após adicionar um novo recurso.

Problema Encontrado

  • Ao tentar deletar um post, em algumas situações o post não era removido conforme esperado.
  • Quando um novo post era criado, comportamentos inesperados também ocorriam.

Análise do Problema

  • O problema estava relacionado ao uso de ações assíncronas com a API.
  • O autor observa que, ao chamar o action creator, a função executa de forma assíncrona e não espera pela resposta da API antes de continuar a execução.
  • Isso leva a um estado inconsistente, onde a mudança de cena acontece antes que a atualização dos posts seja concluída.

Demonstração do Problema

  • Para ilustrar, foi sugerido o uso de um setTimeout para simular um atraso na resposta da API.
  • Após definir um aguardamento de três segundos, o autor demonstra que:
    1. A cena muda imediatamente após a requisição de deleção.
    2. A lista de posts não é atualizada enquanto a requisição não finaliza.
    3. Quando a resposta chega, o estado da lista ainda não reflete as alterações.

Causa Raiz

  • O componente da lista não se atualiza porque não houve mudança no estado que gere a re-renderização.
  • A ação de deletar o post foi enviada, mas ela não alterou o estado que a lista utiliza para renderizar os posts, resultando em uma discrepância entre o que está na interface e o que está no estado da aplicação.

Conclusão

A questão central reside na necessidade de garantir que o estado da aplicação seja atualizado adequadamente após operações assíncronas para que a interface do usuário reflita corretamente as alterações.

Video Transcript

Então algo muito estranho aconteceu no vídeo passado quando a gente estava testando o aplicativo depois de adicionar aquele botão de da letal. Então o problema é por causa dos pedidos da gata tp que são assíncronos. Então vamos olhar com isso em detalhe. Então eu criei os novos post aqui. Essa lista aqui está 4 posts. Eu vou dar um get para a minha API. Eu criei uns posts aqui, deletei aqueles outros só para a gente analisar o que é que está acontecendo, ver esse problema. Então o problema que a gente encontrou quando a gente estava dando o deletar, às vezes nem deletava, e também quando eu criei um novo post isso também acontece. Eu me deparei com isso também no nosso post. Então a gente encontrou um bug. Então vamos dar uma analisada. Vamos dar uma olhada aqui. Então se eu voltar lá para o deletar, que post edit, você nota que a gente está chamando um action creator e também está chamando actions aqui para mudar de cena. O problema aqui é que o esse action creator aqui é assíncrono. Então vai fazer um pedido a gata tp e leva um tempinho para receber a resposta. Mas o JavaScript não vai parar e esperar esse cara completar. Ele executa esse statement aqui, esse comando e vai continuando executando os outros enquanto a resposta espera a resposta ao mesmo tempo. Então pode acontecer que esse cara aqui tenha mandado a resposta, mas mandado o pedido, mas a resposta ainda não vem quando esse cara aqui executa. Tá bom? Esse é o problema. Para demonstrar isso, eu posso fazer um set time out desse cara aqui. Para ser executado somente depois de, por exemplo, três segundos. Vou botar três segundos aqui. É milliseconds, então tem que botar vezes mil, três segundos. Então o set time out vai, depois de três segundos, vai executar essa função. Então vai simular aquele pedido a gata tp de levar um tempo para receber a resposta. Então nesse caso, esse aqui não vai ser executado até três segundos depois. Então primeiro vai fazer o action.less que vai mudar de cena para lista. E quando moda de cena para isso, a lista ainda vai estar com aqueles posts antigos, não vai estar atualizada. Depois que a gente ler, eu estou, ainda vai estar lá. Então para demonstrar, vamos salvar. Voltando aqui. On the list press, eu vou deletar esse ola world primeiro e vou editar e vou deletar. Primeiro post. Pertei, deletar, você vê que já mudou de cena. O pedido foi feito e provavelmente três segundos vai receber a resposta, mas nada vai acontecer. Cade? Nada aconteceu. Então o set atualizada, você note que já removeu. Então por que não atualizou? Então o, esse componente aqui, só vai atualizar quando você mudar o estado. Mas nesse caso, quando eu fizer o delet post, ele chama action creator, retorna esse delete post. Mas o delete post não muda nenhum estado, senote que a gente faz o delete post aqui, mas a gente muda só selected, mas o selected não é usado na lista. Quem é que é usado na lista? É só o all, esse cara aqui.
Nenhum comentário ainda (loading...)
Nenhum comentário ainda (loading...)
Gostou da aula? 😆👍
Apoie nosso trabalho com uma doação: