ANGULAR NGRX MASTERCLASS: Effects, Reducers, Actions, Stores Explicados com Exemplos Práticos
ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- Domine o NGRX do Angular: Seu Guia Completo com Exemplos Práticos! Descubra como dominar Effects, Reducers, Actions e Stores no Angular com exemplos reais. Transforme seu código e eleve suas habilidades de desenvolvimento. Clique agora e torne-se um expert em NGRX! 🔥 #Angular #NGRX #WebDevelopment #codingtutorial
Repo do projeto:
github.com/cri...
mano q bagulho de loco, me perdi todinho...
eu lembro q na empresa q eu trabalhava, tinha 1 cara só q mexia com isso dai, vc nunca via o mesmo feliz.... era sempre um semblante triste.... tá explicado... kkkkkk
mas valeu irmao! tmj!
uhasuhsahuashusahu Como eu disse, se da pra não usar, não usa, mas assim, o mercado usa essa parada, ai não da pra deixar de aprender, infelizmente né Carlos!
Excelente aula, embora eu já conheça o Angular como você disse vai um tempo para entender o NGRx! Parabéns 👏🏽
Complexo! Vlw mano!
Muito interessante a aula para o Angular, quanto ao React, consigo tbm tratar coisas simples com Context Api, em vez de usar redux, que também deixa tudo mais complexo.
Achei legal, parece muito o redux do react kkk, foi até tranquilo de entender por conta disso, obg fessor 🎉
excelente... Cristian você é fera.... precisamos de mais conteúdos como este do NGRX
Cara, difícil dar um feedback falando tudo que a gente quer dizer de uma aula incrível como essa, mas vou tentar resumir. Ficou bem didático: Você usou um exemplo simples, explicou o conceito/fluxo (do Redux/NgRx) da forma correta e fez algo que muita gente não faz (não porque não querem, mas por tentar ensinar algo de boa vontade apesar de não dominarem o assunto, oque vale é a intenção). No mais, fiquei surpreso de saber que era a quinta gravação sendo que mostrou um carisma e boa disposição/vontade do início ao fim da aula. Sou muito grato por essa jóia que você produziu, tenho certeza que ajudou muita gente. O like é o mínimo e a inscrição tá feita. Oque eu precisar aprender em vídeo (angular), vou ter seu canal como referência. Valeeeeu.
Só um pequeno anexo: Eu estava precisando aprender como introduzir os effects no meio pois todo o resto já tinha assimilado e aplicado, mas nem sempre a gente encontra algo em vídeo com tal qualidade. Só gratidão. Não querendo me extender, mas já fazendo-o: Eu tive algumas experiências profissionalmente de ajudar outros a aprender algo onde entendi que consegui ensinar de forma fácil (oque seria fundamental), mas até então não tive coragem para gravar algo ensinando por sempre pensar que eu deveria dominar algo para explicar muito bem aquilo (como entendo que foi o caso dessa aula). Então se tiveres algum conselho sobre isso, fica a vontade. Desculpa o textão, rsrs.
Muito boa a aula!!! Se der faz a parte 2, com o restante do conteúdo.
Qual restante? ashuahushuhuasuh Desculpa...
Cara seu canal é uma benção parabéns pela aula. É como vc disse eu tb não usaria, o Angular é muito complexo e este bagulho piorou o Angular, creio q isto só aumenta o custo de um projeto, sem muitos reais retornos de produtividade. Se um dia eu chegar a ser um Team Leader, eu jamais implementaria o NgRX algo assim.
didática sensacional!
Vlww manow!
Maravilhoso!
⭐⭐⭐⭐⭐
Espetáculo Cristian. C não tem ideia da importância dos seus vídeos pra gente que esta iniciando. Obrigado!!
Vc é o cara mano
É nóssss
Boa, conteúdo veio justo na hora que eu tava procurando algo de NGRX para estudar
Sai dessa vida! uhsahushusa brincadeira, como eu disse, o mercado pede bastante, é importante saber sim!
Parabéns pela sua arte, á dias que estava a procura de um conteúdo com essa qualidade, sou DEV java e atualmente peguei um projeto com Angular que usar o NGRX. Com essa aula agora posso ficar mais tranquilo e seguir com meu trabalho.
@@joseclaudio6706 que foda mano! Tmj! Chega mais no canal pra gente falar de Angular 🙉🙉
Tbm trabalho com React, e nao é como vc mencionou usava-se bastante Redux, Reducer pra gerenciar tudo dentro do app, uma abstração do caramba pra fazer coisas simples, mas isso era na época dos Class Components, hj com a api de hooks as coisas estão bem mais simples e faceis de entender, pelo menos nos últimos projetos que trabalhei, requisições ficavam nos services, pra gerenciar states usa outras ferramentas como zustand que cria uma store e suas actions pra manipular esses states, se precisar dividir contextos se cria novas stores cada uma com suas particularidades, ou até mesmo o próprio contextApi que é nativo do React, ja trabalhei com essa mesma abordagem no Angular e nao me agrada assim como o Redux no React, prefiro ainda usar os services e criar um BehaviorSubject pra compartilhar as infos entre os componentes, na minha opinião isso resolve 95% dos problemas em praticamente qualquer app. Excelente conteúdo mano, parabéns pelo canal.
Muito massa a aula. Como sempre aprendo muito com você. Sensacional de mais
Vlww rei! Dahora demais!
Mano, eu estava pra pedir um vídeo com esse tema, matou a pau!!
Hahaha espero que gostei Danilão, qualquer dúvida solta aí
@@cristianwilliamdev eu aprendi angular em um sistema que tinha RxJs e ngrx até o talo, pensa num cara que perdeu noites de sono pra entender essa doidera kkkkk
@@danilo_teixeira Mano, ai e de chorar hahahaha RxJS já é complicado, com NGRX dói demais hahah.
Hoje você deve estar bem treinado hahaha
Gravou pela 5ª está aula, mais valeu a pena, uma verdadeira MasterClass.
Vlwww manow!
Top demais Cris,
queria fazer um pedido... teria como você fazer um vídeo passando os padrões de arquiteturais que são utilizados em projetos angular e boas práticas.
E se fizer um curso de angular, vou ser o primeiro a comprar kkk tmj
Boaa Leo, dahora mano! Da pra pensar sim! Sobre o curso, está saindo do forno ahahah
vou aplicar na prox sprint do App Itau, salvou d+ braboooo
Oiaaaa, se fosse do Bradesco ia pedir pra apagar tudo, pq não presta aushhsauuhsa uhsa
Melhor aula que eu já vi até hoje explicando esse assunto, que na minha opinião ignorante, só complica os projetos rs.... Muito mais fácil o component chamando a service e tudo certo, mas... igual eu mencionei, como não manjo de NGRX ainda, acho complexo esse vai e volta! Parabéns, mandou muito bem!
Mano, eu concordo total contigo, não vejo essa necessidade toda não, rxjs já resolve a grande parte desse role todo ai
Estou aprendendo angular e por saber Vue e ter uma ampla xp com Vue, venho tendo uma facilidade, mas estou vendo que Angular a curva realmente é longa, por conta da Programação Reativa, questão das propriedades que ela contém, tendo essa visão ai essa parte de state manager se torna simples, e outras coisas do framework em si, o que está pegando mesmo é a questão do Rx e o não uso de promisse com Rx e sim observables.
Mano, angular não é tão difícil, quando se entende standalone componentes, rxjs e services... Agora, ngrx é uma complexidade a mais desnecessária.
Já trabalho com angular há tanto tempo e não conhecia isso, confesso que fiquei assustado com a complexidade que tem. Realmente só faz sentido usar em projetos muito grandes. Parabéns pelo conteúdo!
Tinha visto esse assunto de state global in react, ambos são confusos de entender, mas para quem está vendo pelo a primeira vez, deu pra dar um noção
Sim mano, é confuso e complexo, assim, como eu disse, é algo que aumenta a complexidade do projeto, sendo assim, tem que analisar quando vale a pena mesmo de usar
obrigado, sou backend mas lidero o time de angular e back, seus videos tem me ajudado demais pq front end é meu ponto fraco
Que maneiro mano! Fico feliz demais com isso brow!
Meti o like na tua cara
Ahusahusahushu tmj
Esse Cristian é brabo! Fala com desenvoltura e tem boa didática.
Esses tutoriais ajudam muito a evoluir
Vlwww meu mano! Feliz em ajudar voces ai! Dahora demaisss!
Parabéns pelo canal Cristian, acabei conhecendo atravéz de um vídeo com uma dica para gerar components e gostei bastante da forma que você passa o conhecimento nesse vídeo, mesmo eu não tendo a mínima intenção de utilizar Rgrx em meus projetos, porém é sempre bom se atualizar mesmo não trabalhando com as versões mais atuais do angular.
Explicou de forma clara e objetiva!! Muito obrigado pela aula!!
Vlww mesmo Thales! É nois mano!
Maravilhosa aula, parabéns!!!
Que aula sensacional!!! Que conteúdo top!!! Parabéns Cristian, ganhou mais um inscrito e fã do seu trabalho...
As vídeo aulas que você faz são leves e muito mas muito boas. Sem dúvidas as melhores que já vi...
Continue propagando conhecimento e nos ajudando rsrsrs...
Grande abraço
Que foda Thiago! Fico tão feliz com isso!
Top demais essa aula Cris, quase não tem conteúdo sobre NGRX, vc é incrível.... Aguardar que esse ano seu curso avançado de angular sai rs
Sai sim! NGRX é maneiro mas nossa, acho que com o que temos no Angular, não é tão necessário assim na grande maioria dos casos... Obrigado Aiandra!
Conteúdo de muito valor, parabéns!
Cristian quando der gera um conteúdo do NgRX/Signals plz!
Ngrx é quase inutil pra mim cara hasuhsahusa Posso tentar trazer mas acho uma super mega complexidade atoa. Em alguns use cases mega específicos talvez faça sentido.
cara eu devo estar a 1 ano sem fazer nada em angular, desde que conclui um curso da Udemy bem completo por sinal. mas andei vendo seu canal e animei de fazer algo novamente.
Sua didática é muito boa irmão!
Que dahora mano! Fico felizão assim! Tmj Samuka!
ow tu é engraçado man kkkk, seria dahora trabalhar ctg kk, quem sabe um dia agt n se esbarra por ai kkk
Quem sabe em mano, dahora ter curtido!
Caramba fiz todo o tutorial, no fim estava tudo funcionando, mas continuo sem entender nada rs... vou precisar de mais uns 3 turoriais pra internalizar esse rolê todo que eu poderia resoler com 1 service.
Mas valeu o tutorial, eu que realmente preciso estudar mais essa bagaça.
Hahahaahah mas essa foi um exemplo muito simplista, mas mandando a real, mais de 90% dos projetos angular, pode ser resolvido com o RXJS 😅
@@cristianwilliamdev
Kct, tenho que mudar de área kkkkk se isso aí é simples.
Mas eu sei, trabalhei em um proj que o cara além de inventar de adicionar isso aí em uma aplicação complexa (que já estava funcionando), ainda adicionou uma pohada de heranças e abstrações no meio.
No final fez a vida de todo mundo o inferno, dando um trabalho do cão para manter e... para funcionar eatamente como já funcionava antes com serviços singleton.
No mais valeu peos tutoriais, sei que o problema aí é o NGRX que é um C* mesmo.
Tu é massa demais!! Aula incrível! Mostra depois como faria apenas usando Rxjs e services
Opaaa, sim sim, estou fazendo umas lives clonando o whats app, uso muito rxjs nessas lives, cola lá pra voce ver mano, da pra pegar muito sobre rxjs! Tmj Matheus!
Mesmo com os problemas no final a aula foi muito boa! espero ter uma continuação com tratamento de erros e afins.
Podemos sim, sem problemas brother! Vou me planejando aqu... Quero trazer outras opcões de gerenciamento de estados com Angular
Excelente Crisss, que aula!
Curiosidade: Qual fonte ou tema que voce usa no seu VSCode para algumas palavras ficarem em italico ? muito massa haha
Segredo mano! shsahuashua Zueira!
th-cam.com/video/aab7pXZk1eQ/w-d-xo.html
Fiz esse video onde ensino como fazer a config! Da uma sacada lá
Rapaz está de parabéns, aprendei muito de como funciona no RgRx, didática muito boa, depois poderia fazer um sistemas utilizando o RxRx com uma API fake abordando o crud completo, para reforçar bem... mais no restante feito tudo top...
Dahora demais mano, feliz de ter curtido! Cara, para falar a real, em muitos casos a gente resolve com rxjs, então costumo não usar tanto o ngrx... Inclusive, em poucas semanas estarei fazendo uma live em comemoração aos 3000 inscritos onde iremos montar um sistema super reativo com backend ainda para fazer o tempo real! Fica ligado no canal!
OPA! Seria muito interessante abordar o conteúdo sobre NGXS também, particularmente eu acho mais prático e simples que o NGRX, apesar de reconhecer que os dois fazer o trabalho muito bem feito.
Salve mano, estou acompanhado o ngxs a pouco tempo, confesso que o NGRX é mais pedido no mercado, mas sim, pelo que estou vendo, o ngxs é mais agradável de usar e tal… Vou colocar na lista pra montar um conteúdo em breve
conteudasso parabens
Vlwww meu rei!
dei uma risada honesta no "fodse uq acontece por debaixo dos panos" kkkkkk
Parabéns Cris, muito bom!
Se usar o novo Angular Signals combinado com Services pra gerenciar o estado. Mesmo em sistemas grandes, vc acha que da pra substituir o uso do NGRX sem problemas, ou vc acha que fica menos eficiente?
Na minha opinião, na grande maioria das vezes, services com rxjs e agora com signals, substitui demais o ngrx... Ficando muito melhor pra dar manutenção inclusive haha h
Por um mundo onde os "irmões" não briguem mais (React/Next, Angular e Vue). Amém! 🙏🏻
hsahusahusa eu nem fico mais nessas disputa e tal, não leva a nada! No final todos os frameworks aprendem entre si e irei usar o que mais gosto... Mas confesso que não curti react nem de longe
Muito show! Tem como mandar o link do git desse projeto com NGRX ?
Não tinha publicado mano, mass, publiquei pra voce hahah tmj mano! Bons estudos
github.com/cristianWilliam/angular-ngrx-aula
Você prefere vscode ao webstorm para desenvolver apps angular?
Mano eu nunca testei o webstorm... Gosto do vs code e do Rider IDE, mas o Rider é muito poder de fogo para somente trabalhar com Angular... Ai vou de Vs code na grande maioria mano!
É considerado válido utilizar ngrx para controlar estado de formulários complexos onde os dados não ficam apenas em um componente, mas também em modais para adicionar/editar objetos agregados?
Cara, depende muito, eu acredito que para alta complexidae eu tentaria resolver sem, talvez unificando os dados em uma service e tal...
Cristian se usa -se em somente em aplicações serveless? Pois estes Status etc o Backend já nos fornece nas requisições HTTP, não fica algo retundante?
Falaaa mano, então brother, na real não, pq seu componente estaria escutando apenas o estado, não o resultado a requisição... A requisição seria executada no effect, que iria emitir uma action como resultado, e essa action, iria ser tratada no Reducer para ai sim, alterar o estado, e seu componente ficar sabendo que deu erro... Por isso gosto de deixar o status no state também quando sou obrigado a usar NGRX sahushauhsau
Olá, minha dúvida. Já vi uns vídeos dizendo que não tem necessidade de usar NGRX, porque o Angular já um gerenciador de estado próprio.
Simmmmm, eu mesmo, prefiro usar somente nos ultimos dos ultimos casos.... Quando falam de gerenciador de estado proprio, é que o Angular já vem com Injeção de dependencia, e os observables do rxjs, que conseguem muito bem resolver isso
Uma dúvida: No caso em uma aplicação real quando ele insere um novo livro na UI mas também tenta inserir um novo livro no backend, se ocorrer erro no backend como isso deverá ser tratado ? Não deveria a alteração no DOM só ocorrer depois que tenho a confirmação que os dados foram persistidos ?
No caso de uma aplicação real mano, no caso de erro, voce iria disparar uma outra action, notificando o erro, e o seu componente teria que se inscrever nessa action também e reagir a ela...
Sobre a alteração na DOM, isso depende da exp do usuario, por exemplo, o Twitter, ele não espera completar o upload para mostrar para voce o post na sua timeline, as coisas ocorrem em segundo plano, mas voce tem a impressão que já concluiu... Enfim, isso depende mais do UX que de outras coisas, se no caso, a inserção de livro, pode ter batante caso de erro, acho que seria interessante esperar sim, mas do contrário não, enfim, puro UX mesmo
Igual o lixo do Redux no ambiente React.
Dá pra gerenciar o estado da aplicação com o uso de serviços de forma muito mais limpa e intuitiva com Angular.
@@pauloeduardo1461 Boaaa, agora só falta ver meu vídeo onde eu ensino toda essa baboseira com RxJs nativo 🤘🏻🤘🏻🤘🏻
Estou no Angular por tua causa. Tudo culpa sua kkkkkkkkkk
Hsauhsahusahua ixiiii, corajoso hashusahusa , mas é o melhor framework, só não é o mais usado, mas o mais organizado...
Conteúdo muito top, mas pensa na dor de cabeça 😅
Sou fã também não haahha mas tem que saber pq o mercado pede essa eng toda as vezes. Mas obrigado pelo comentário!
Salve, sou novo por aqui e tenho uma duvida, você foi claro que esse recurso é complexo e extenso pra caramba e na maioria das vezes desnecessário, então para comunicação entre componentes independentes onde não posso usar @input e @output, qual a abordagem que você utilizaria, eu usei um atributo publico no serviço que recebe o Observable resultado de uma requisição realizada em um componente(A) e busco esse valor no componente(B) para exibir os valores, fiz isso porque o componente(A) é global e está em toda a aplicação (cabeçalho) gostaria de saber sua opinião, parabéns pelo conteúdo.
Falaaa brother, eu iria pela mesma abordagem, mas iria encapsular a responsabilidade de publicar e escutar o observable dentro da service... Ou seja, dentro da service, eu teria um subject, ou behaviorSubject porém os componentes iriam acessar o observable atraves de um metodo public que exporta este objeto como asObservables tirando a responsabilidade de publicar do componente.
e no caso de ter q pesistir informacoes no estado ? devo usar cookies?
Mano, tem algumas libs que da para trabalhar junto ao ngrx que persistem o estado junto ao localstorage, acho uma opcão valida até...Onde voce não precisa controlar isso na mão, a lib garante que toda troca de estado, será gravada no local storage
Até chegar nos effects, tava indo bem. Dai em diante, não entendi mais nada 😆😆
Eu não consigo mais iniciar um projeto sem ngrx, pq sim. E não vou parar, foda-se
Eitaa mano! Eu já vou pelo caminho contrário! Eu prefiro começar sem NGRX, depois, conforme for aumentando a complexidade eu considero adiciona-lo... Mas na grande maioria das cezes eu resolvo com rxjs e services..
Like sem assistir. Kkkkk pq o assunto é bom
Que confiançaaaa! Tmj mano!
Quem usa?
Mais um pro time hahahaha
Não gosto também
Quem me dera dar pra usar zustand no angular kakakakakaka
Prefiro usar o RXJS, já resolve tudo, de uma forma muito mais simples hahahaha h
Excelente aula, embora eu já conheça o Angular como você disse vai um tempo para entender o NGRx! Parabéns 👏🏽