Aula 33
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:
- A cena muda imediatamente após a requisição de deleção.
- A lista de posts não é atualizada enquanto a requisição não finaliza.
- 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: