ANGULAR NGRX MASTERCLASS: Effects, Reducers, Actions, Stores Explicados com Exemplos Práticos

No video

ANGULAR NGRX MASTERCLASS: Effects, Reducers, Actions, Stores Explicados com Exemplos Práticos

Рет қаралды 5,763

8 ай бұрын

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...

Пікірлер: 120

@joseclaudio6706 Ай бұрын

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.

@cristianwilliamdev Ай бұрын

@@joseclaudio6706 que foda mano! Tmj! Chega mais no canal pra gente falar de Angular 🙉🙉

@carlos24426 5 ай бұрын

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!

@cristianwilliamdev 5 ай бұрын

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!

@KallyFire1 11 күн бұрын

Achei legal, parece muito o redux do react kkk, foi até tranquilo de entender por conta disso, obg fessor 🎉

@gabrielbeirigo4416 23 күн бұрын

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.

@moizeseder 7 ай бұрын

excelente... Cristian você é fera.... precisamos de mais conteúdos como este do NGRX

@brunoc.a.gaudino6150 2 ай бұрын

Excelente aula, embora eu já conheça o Angular como você disse vai um tempo para entender o NGRx! Parabéns 👏🏽

@josevicentedesousa 3 ай бұрын

Espetáculo Cristian. C não tem ideia da importância dos seus vídeos pra gente que esta iniciando. Obrigado!!

@dumail 4 ай бұрын

Muito boa a aula!!! Se der faz a parte 2, com o restante do conteúdo.

@cristianwilliamdev 4 ай бұрын

Qual restante? ashuahushuhuasuh Desculpa...

@lindermannla 2 ай бұрын

Cristian quando der gera um conteúdo do NgRX/Signals plz!

@cristianwilliamdev 2 ай бұрын

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.

@CapyDev404 28 күн бұрын

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.

@CapyDev404 28 күн бұрын

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.

@chico3870 2 ай бұрын

didática sensacional!

@cristianwilliamdev Ай бұрын

Vlww manow!

@edvanjunior5028 8 ай бұрын

Boa, conteúdo veio justo na hora que eu tava procurando algo de NGRX para estudar

@cristianwilliamdev 8 ай бұрын

Sai dessa vida! uhsahushusa brincadeira, como eu disse, o mercado pede bastante, é importante saber sim!

@Tibiafy 4 ай бұрын

Muito massa a aula. Como sempre aprendo muito com você. Sensacional de mais

@cristianwilliamdev 4 ай бұрын

Vlww rei! Dahora demais!

@dev.danstone 2 ай бұрын

Vc é o cara mano

@cristianwilliamdev 2 ай бұрын

É nóssss

@tonyfilho1643 Ай бұрын

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.

@luizfernando-tu5si 9 күн бұрын

dei uma risada honesta no "fodse uq acontece por debaixo dos panos" kkkkkk

@AndreyMariano 2 ай бұрын

Gravou pela 5ª está aula, mais valeu a pena, uma verdadeira MasterClass.

@cristianwilliamdev Ай бұрын

Vlwww manow!

@brandonnunes6322 3 ай бұрын

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.

@marcosjesus07 2 ай бұрын

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.

@cristianwilliamdev Ай бұрын

Mano, angular não é tão difícil, quando se entende standalone componentes, rxjs e services... Agora, ngrx é uma complexidade a mais desnecessária.

@Thiago833 4 ай бұрын

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

@cristianwilliamdev 4 ай бұрын

Que foda Thiago! Fico tão feliz com isso!

@Mumuzera 4 ай бұрын

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!

@cristianwilliamdev 4 ай бұрын

Mano, eu concordo total contigo, não vejo essa necessidade toda não, rxjs já resolve a grande parte desse role todo ai

@djrandomoficial4901 2 ай бұрын

vou aplicar na prox sprint do App Itau, salvou d+ braboooo

@cristianwilliamdev 2 ай бұрын

Oiaaaa, se fosse do Bradesco ia pedir pra apagar tudo, pq não presta aushhsauuhsa uhsa

@faustinosilva123 8 ай бұрын

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.

@ViniciusPugliesi 3 ай бұрын

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!

@danilo_teixeira 8 ай бұрын

Mano, eu estava pra pedir um vídeo com esse tema, matou a pau!!

@cristianwilliamdev 8 ай бұрын

Hahaha espero que gostei Danilão, qualquer dúvida solta aí

@danilo_teixeira 8 ай бұрын

@@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

@cristianwilliamdev 8 ай бұрын

@@danilo_teixeira Mano, ai e de chorar hahahaha RxJS já é complicado, com NGRX dói demais hahah. Hoje você deve estar bem treinado hahaha

@thalessantos3535 6 ай бұрын

Explicou de forma clara e objetiva!! Muito obrigado pela aula!!

@cristianwilliamdev 5 ай бұрын

Vlww mesmo Thales! É nois mano!

@andreeua4329 8 ай бұрын

Esse Cristian é brabo! Fala com desenvoltura e tem boa didática. Esses tutoriais ajudam muito a evoluir

@cristianwilliamdev 8 ай бұрын

Vlwww meu mano! Feliz em ajudar voces ai! Dahora demaisss!

4 ай бұрын

Maravilhosa aula, parabéns!!!

@aiandraalvesmeira1039 7 ай бұрын

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

@cristianwilliamdev 7 ай бұрын

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!

@WhiteLotusZuko 4 ай бұрын

obrigado, sou backend mas lidero o time de angular e back, seus videos tem me ajudado demais pq front end é meu ponto fraco

@cristianwilliamdev 4 ай бұрын

Que maneiro mano! Fico feliz demais com isso brow!

@leonardomendes8717 5 ай бұрын

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

@cristianwilliamdev 5 ай бұрын

Boaa Leo, dahora mano! Da pra pensar sim! Sobre o curso, está saindo do forno ahahah

@LucasRibeiro-zl1ss 3 ай бұрын

Conteúdo de muito valor, parabéns!

@AndAllves 7 ай бұрын

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

@cristianwilliamdev 7 ай бұрын

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

@samukarbrj 6 ай бұрын

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!

@cristianwilliamdev 6 ай бұрын

Que dahora mano! Fico felizão assim! Tmj Samuka!

@matheus_rian 7 ай бұрын

Tu é massa demais!! Aula incrível! Mostra depois como faria apenas usando Rxjs e services

@cristianwilliamdev 6 ай бұрын

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!

@nicolasguilhermematheus3933 4 ай бұрын

ow tu é engraçado man kkkk, seria dahora trabalhar ctg kk, quem sabe um dia agt n se esbarra por ai kkk

@cristianwilliamdev 4 ай бұрын

Quem sabe em mano, dahora ter curtido!

@XINTSUAI 3 ай бұрын

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.

@cristianwilliamdev 3 ай бұрын

Hahahaahah mas essa foi um exemplo muito simplista, mas mandando a real, mais de 90% dos projetos angular, pode ser resolvido com o RXJS 😅

@XINTSUAI 3 ай бұрын

@@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.

@tentandoTancarOBostil 8 ай бұрын

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.

@cristianwilliamdev 8 ай бұрын

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

@pedrohm005 8 ай бұрын

Mesmo com os problemas no final a aula foi muito boa! espero ter uma continuação com tratamento de erros e afins.

@cristianwilliamdev 7 ай бұрын

Podemos sim, sem problemas brother! Vou me planejando aqu... Quero trazer outras opcões de gerenciamento de estados com Angular

@Yannk777 8 ай бұрын

conteudasso parabens

@cristianwilliamdev 8 ай бұрын

Vlwww meu rei!

@igorduarte2896 4 ай бұрын

Meti o like na tua cara

@cristianwilliamdev 4 ай бұрын

Ahusahusahushu tmj

@opombodiego 6 ай бұрын

Excelente Crisss, que aula! Curiosidade: Qual fonte ou tema que voce usa no seu VSCode para algumas palavras ficarem em italico ? muito massa haha

@cristianwilliamdev 6 ай бұрын

Segredo mano! shsahuashua Zueira! kzfaq.info/get/bejne/l8eSatOJv9GVlYU.html Fiz esse video onde ensino como fazer a config! Da uma sacada lá

@ALEXANNDREF 8 ай бұрын

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...

@cristianwilliamdev 7 ай бұрын

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!

@CMScofield7 8 ай бұрын

Por um mundo onde os "irmões" não briguem mais (React/Next, Angular e Vue). Amém! 🙏🏻

@cristianwilliamdev 8 ай бұрын

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

@LeandroLima-ew7tl 8 ай бұрын

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?

@cristianwilliamdev 8 ай бұрын

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

@antoniovieiradasilvajunior666 6 ай бұрын

Muito show! Tem como mandar o link do git desse projeto com NGRX ?

@cristianwilliamdev 6 ай бұрын

Não tinha publicado mano, mass, publiquei pra voce hahah tmj mano! Bons estudos github.com/cristianWilliam/angular-ngrx-aula

@pauloeduardo1461 6 күн бұрын

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.

@cristianwilliamdev 6 күн бұрын

@@pauloeduardo1461 Boaaa, agora só falta ver meu vídeo onde eu ensino toda essa baboseira com RxJs nativo 🤘🏻🤘🏻🤘🏻

@davidwelber 5 ай бұрын

Estou no Angular por tua causa. Tudo culpa sua kkkkkkkkkk

@cristianwilliamdev 5 ай бұрын

Hsauhsahusahua ixiiii, corajoso hashusahusa , mas é o melhor framework, só não é o mais usado, mas o mais organizado...

@andersondamasceno1356 8 ай бұрын

Você prefere vscode ao webstorm para desenvolver apps angular?

@cristianwilliamdev 8 ай бұрын

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!

@antoniovieiradasilvajunior666 6 ай бұрын

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 ?

@cristianwilliamdev 6 ай бұрын

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

@vitoremidio4090 8 ай бұрын

É 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?

@cristianwilliamdev 8 ай бұрын

Cara, depende muito, eu acredito que para alta complexidae eu tentaria resolver sem, talvez unificando os dados em uma service e tal...

@tonyfilho1643 Ай бұрын

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?

@cristianwilliamdev Ай бұрын

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

@alexpassos590 5 ай бұрын

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.

@cristianwilliamdev 5 ай бұрын

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

@jaquelinecandia1307 8 ай бұрын

Conteúdo muito top, mas pensa na dor de cabeça 😅

@cristianwilliamdev 8 ай бұрын

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!

@SilvairLeiteSoares 3 ай бұрын

Até chegar nos effects, tava indo bem. Dai em diante, não entendi mais nada 😆😆

@gilsonpro103 6 ай бұрын

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.

@cristianwilliamdev 6 ай бұрын

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.

@erickjhonata5193 8 ай бұрын

e no caso de ter q pesistir informacoes no estado ? devo usar cookies?

@cristianwilliamdev 7 ай бұрын

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

@anderdsouza 8 ай бұрын

Eu não consigo mais iniciar um projeto sem ngrx, pq sim. E não vou parar, foda-se

@cristianwilliamdev 8 ай бұрын

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..