Design Patterns no ReactJS? Entenda na prática e não dependa mais de libs como o Axios

[@devjunioralves]

👉 Livros que recomendo pra você: Lógica de Programação e Algoritmos com JavaScript: amzn.to/48Cj65Z JavaScript: O Guia Definitivo: amzn.to/48jh9vp Como ser um programador melhor amzn.to/48WYGVj Arquitetura Limpa (Clean Arch) amzn.to/3Viqw7v Clean Code amzn.to/3hHXVKY Estruturas de dados e algoritmos com JavaScript amzn.to/49FOzFd --- ✅ Segue lá no Instagram: instagram.com/devjunioralves/ ✅ Nossa comunidade no Discord: discord.com/invite/bVxW4Dhgrf

[@LimaGabriel1]

;-;

[@EulerAlvarenga1]

adoraria saber sobre esses erros customizados!!!

[@devjunioralves]

Opa, vou trazer sim man. Valeu demais por comentar!

[@Paulo-cf4mh]

Parabéns pelo trabalho feito Júnior, um conteúdo de altíssimo nível que tem muito pouco para quem é front-end, tem me ajudado a ter uma visão muito além do que eu imaginava.

[@eduardobertozi8506]

Muito show esse conteúdo em Junior! Até pouco tempo atrás só se achava essas informações em canais ou sites gringos. Obrigado!!!

[@devjunioralves]

De fato, conteúdo mais avançado e em português é difícil. Bora tentar mudar isso 👊

[@eduardobertozi8506]

@@devjunioralves 👏

[@kauazinho4153]

É possível ativar o Code Lens nativamente no VS Code para JS e TS. Isso mostra qual classe esta sendo usada por outra

[@meguinha8103]

Eu tenho feito uma abordagem parecida mas com usecase no caso eu tenho um service atravéz de dependência ele consome endpoints que são do tipo httprequestusecase aí essa class é abstrata meu caso de uso implementa ela e eu injeto e apenas chamo o execute no service respeitando o contrato mantendo a responsabilidade única padronizando com classe abstrata e invertendo a dependência se alguém quiser ver um exemplo eu posso mostrar fica bem organizado e separa o código da implementação de fato facilitando os testes

[@doasalah]

Se puder, compartilha o repo

[@devjunioralves]

Que show, se puder compartilhar, seria muito bom. Não sei se já esta no nosso Discord, se ainda não e quiser entrar, o link esta no comentário fixado.

[@WallisonMouraDev]

Top, top e top, Parabéns pelo conteúdo camarada. Tem me ajudado bastante, e com certeza vai agregar muito.

[@ruanzassen]

Muito bom! seus vídeos tem me ajudado bastante! Continue

[@devjunioralves]

Que show Ruan, fico feliz demais em saber disso!

[@Yuri-yu3pp]

Viídeo ótimo, traz mais sempre! Mas uma dúvida: supondo que eu tenha já uma aplicação robusta com vários locais chamando um adapter do axios e eu queria mudar todos para o fetch. Eu vou ter q sair alterando arquivo por arquivo, certo? Não seria ideal ter mais uma camada que vai lidar com toda request e eu chame ela em cada ponto que precisar? Assim, caso eu mude tudo para fetch, vou alterar no principal, e o resto que usa esse metodo para bater na api, nem vai saber que mudou. E caso eu queria manter o axios em alguns locais específicos, beleza, eu altero só neles para chamar o adapter do axios e deixo o principal chamando o fetch ou qualquer um q seja.

[@IgorAlves15]

Eu faria isso também, teria um caso de uso que recebe um serviço como argumento, e independente de onde eu usar esse caso de uso ele nem sabe quem é que está implementando, se é com axios, com fetch, em memória... E se usa em várias lugares injetaria via context api, para ter centralizado esse serviço.

[@devjunioralves]

Excelente pergunta, tu pode centralizar isso (que é o que eu faço) usando outro pattern, o Factory, daí tu usa essa Factory e quando quiser mudar, muda nela e o restante nem fica sabendo.

[@EliabyTeixeira]

Muito bom cara... parabéns pelo conteúdo!

[@sombrakey]

Muito bom! Ter uma repo para poder olhar o código de perto?

[@emersontrindade299]

Muito top Junior! Seria tbm interessante abordar como fazer para tratar erros das requisiçoes e mostrar mensagens em Toasts, tipo, qual libe vc usa se já trata eles de forma global e tals...

[@GabrielRibeiro-xg2pr]

Muito Interessante essa maneira de fazer fetch. Poderia fazer um vídeo ensinando a testar isso agora? Um abraço!!

[@felipepasqua5738]

Uma duvida, como vc estuda e fica sabendo dessas patterns e coisas mais avançadas ?

[@devjunioralves]

A grande parte de livros, daí é necessário fazer algumas adaptações (em alguns casos) pois a grande maioria foi pensada para POO, daí em abordagens funcionais, muda algumas coisas. Tem o canal do Rodrigo Branas e do Manguinho que recomendo muito, caso ainda não conheça. Tem uma live aqui no canal com o Branas inclusive.

[@br-lemes]

Esses últimos três vídeos são ótimos, eu não trabalho com equipe mais experiente que eu. Então tenho muita dificuldade de entender a utilidade desses padrões e práticas. E ficou bem explicado o como, quando e porque nesses vídeos. Mas me perco, não lembro o que está em que parte do vídeo... não tem um repositório desse código?

[@icarokiilermelo]

Brabo Junior!

[@MaxwellKenned]

que conteudo top. Thanks for sharing.

[@brunomenegidio5842]

Pra não ter que instanciar a classe em todos os componentes e passar manualmente, vc resolveria isso com factory?

[@devjunioralves]

Exatamente Bruno!

[@Evandrooouuu]

Sensacional cara.

[@doasalah]

Junior muito bom video, gostaria de ver tbm tratamento de erros ao fazer requisições

[@devjunioralves]

Sensacional, vou trazer sim conteúdo sobre erros customizados!

[@gbrlcardozo]

obrigada

[@cleiton22ify]

nao entendi como usar, no codigo vc ja tem um componente pronto pra receber ele, como faz se nao tiver esse components , como ele é consumido?

[@EulerAlvarenga1]

uma dúvida cruel… como eu faço pra não ter que passar isso para todo component? Teria alguma forma?

[@devjunioralves]

Sim, tu pode utilizar outro Pattern, Factory, onde retorna um HTTPClient e usa essa Factory na aplicação, daí quando quiser/precisar mudar, basta mudar na Factory e o restante da aplicação nem fica sabendo.

[@EulerAlvarenga1]

@@devjunioralves essas aulas estão abrindo minha mente! Sensacional 🙌 muito obrigado

[@versaleyoutubevanced8647]

agora eu pergunto aos senhores, quando foi a ultima vez que vocês precisaram trocar a lib de fetch?

[@eduardobertozi8506]

kkkkk boa. Mas embora seja um exemplo com algo em que dificilmente teremos essa preocupação, tem muitos casos de uso em que desacoplar dessa forma é interessantíssimo. No frontend é mais difícil entender o propósito, pq são recursos explorados muito mais no backend. Quem está lendo ou já leu os livros do Uncle Bob vai entender bem como é importante utilizar bons padrões e construir um código limpo.

[@devjunioralves]

Trocar, talvez não. Agora já teve problema pq a lib atualizou e quebrou seu projeto? Isso aconteceu com o próprio Axios um tempo atrás, quando ele foi para versão 1.x. E outro ponto, que pra mim é o mais importante, como fica os testes quando tu ta acoplado à uma lib? É simples de ser implementado?

[@maykelmatheusdias3446]

Uma sugestão talvez seria usar ao invés de any para o exemplo de HttpClient o tipo unknown, acho mais semantico nesse caso! Parabéns pelo contéudo!

[@Jhean_Perdido]

🎉🎉🎉

[@devjunioralves]

🚀🚀🚀

[@pedrobenicio4955]

acho que sou a única pessoa da terra que nao gosta de usar axios, mas sim o fetch normal msm....

[@devjunioralves]

Kkkkk Tem muita gente que usa o fetch, mas de fato, o axios traz muitas funcionalidades, porém, o importante é não depender diretamente de nenhum deles.

[@caueoliveira6143]

Com certeza você não é o único. Tenho aversão ao axios. É tipo um ranço mesmo. KKK.

[@br-lemes]

Também não gosto do axios, uso o fetch.

[@mouzinhoraimundo5060]

top