Baixado 33 vezes
![Pipe Async Observable<boolean> Observable<Course[]> async == subscribe + unsubscribe](https://image.slidesharecdn.com/angular-ngrx-170609194627/75/Angular-Redux-ngRx-38-2048.jpg)
Carregado porLoiane Groner
Angular + Redux (ngRx)
Este documento fornece informações sobre Loiane Groner, uma desenvolvedora especializada em Angular, JavaScript e programação reativa. Ela oferece treinamentos sobre esses tópicos e mantém um blog e perfis nas redes sociais para compartilhar conhecimento. O documento também apresenta conceitos-chave da programação reativa e como implementá-la usando Angular e a biblioteca NgRx.
Angular + Redux (ngRx)
- 1. Loiane Groner github.com/loiane loiane.com loiane.training Angular +Redux (ngRx) Desenvolvendo projetos reativos
- 2.
- 3. Disponível (inglês) naamazon.com.br
- 4.
- 5.
- 6. Entender como desenvolver funcionalidades reativas comAngular #itsJustAngular
- 7.
- 10.
- 11. “que reage, respondea estímulos” Reativo
- 12. Reage a dadosque são transmitidos ao longo do tempo
- 13.
- 14.
- 15.
- 16. Já fazemos programaçãoreativa
- 17.
- 19. Objeto Promise Iterable Observable SíncronoAssíncrono ValorúnicoMúltiplosvalores Panorama da teoria da reatividade
- 20.
- 21.
- 22.
- 23. Filtrar informações =>filter http://rxmarbles.com/#filter
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38. Pipe Async Observable<boolean> Observable<Course[]> async ==subscribe + unsubscribe
- 39.
- 40.
- 41. Pipe Async Observable<Course> Sintaxe melhoradaAngular >= 4.x
- 42.
- 43.
- 46.
- 47.
- 48.
- 49.
- 50. COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} SERVIÇOS SERVIÇO A SERVIÇO B Bindingde Propriedades Binding de Eventos
- 51. COMPONENTE {…} TEMPLATE <..> DIRETIVAS {..} SERVIÇOS SERVIÇO A SERVIÇO BMÓDULO X MÓDULO A MÓDULO B Binding de Propriedades Binding de Eventos
- 52. Yay! Projeto novoem Angular!
- 53.
- 54.
- 55.
- 56.
- 58. O maior problemano desenvolvimento e manutenção de sistemas de software de grande escala é a complexidade - sistemas grandes são difícil de entender Ben Moseley & Peter Marks Out of the Tar Pit: Analysis of Software Complexity
- 59. Acreditamos que oprincipal contribuinte para esta complexidade em muitos sistemas é o gerenciamento do estado e o fardo que isso acrescenta ao tentar analisar e entender o sistema. Outros contribuintes estreitamente relacionados são o volume do código e a preocupação com o controle de fluxo do sistema. Ben Moseley & Peter Marks Out of the Tar Pit: Analysis of Software Complexity
- 61. Redux é umabiblioteca, e também é um padrão
- 62.
- 63. https://github.com/InfomediaLtd/angular2-redux Implementação bem parecidacom o redux original
- 64.
- 65.
- 66. Não reativo Variável comum<number>
- 67.
- 68.
- 69.
- 70.
- 71. No componente: (1): InjetarStore import { Store } from '@ngrx/store';
- 72. No componente: (1): InjetarStore import { Store } from '@ngrx/store'; (2): Declarar variável do template
- 73.
- 74. No componente: (3): Obtervalor iniciar do counter$ store.select (pedaço do estado)
- 75.
- 76. No componente: (4): Nolugar de incrementar, decrementar, disparar eventos store.dispatch
- 77.
- 78.
- 79. Reducer Recebe o estado Recebea ação + payload
- 80. Reducer Recebe o estado Recebea ação + payload Retorna um novo estado
- 81. Integração com aaplicação Angular Fornece a store (AppState) para toda a aplicação AppModule.ts
- 82.
- 83.
- 84. Definir ações Para cadachamada Ajax: 3 ações: Pedido (request) Request Completo (altera o estado) Erro
- 85. Definir ações Para cadachamada Ajax: 3 ações: Pedido (request) Request Completo (altera o estado) Erro
- 86.
- 87. No componente Evento depedido para carregar a informação do servidor
- 88. No componente Evento depedido para carregar a informação do servidor
- 89.
- 90. Reducer NÃO mudar oestado diretamente Estado deve ser imutável
- 91. Reducer NÃO mudar oestado diretamente Estado deve ser imutável Reducer DEVE ser uma função PURA Programação Funcional
- 92.
- 93.
- 94.
- 95. Função pura ximpura
- 96. Função pura ximpura
- 97. Função pura ximpura Não modifica o estado e não tem efeitos colaterais
- 98.
- 99.
- 100. Components: Dumb Components -Apenas recebem informações via Input properties e disparam eventos com Output properties - NÃO sabem nem se comunicam com Store ou Estado da aplicação
- 101.
- 102. Containers: Smart Components Escutamos eventos dos Componentes filhos e fazem o dispatch
- 103. Containers: Smart Components Lidamcom o ngRx e a Store Escutam os eventos dos Componentes filhos e fazem o dispatch
- 104. Mas e acomunicação com servidor?
- 105. Redux apenas seinteressa pela estado do cliente (frontend)
- 106. Store side effects EfeitosColaterais @ngrx/effects
- 107. Effects Escuta a açãode Pedido e faz dispatch da ação de “Completo" - que muda o estado
- 108. Effects + ServiceAPI o Serviço da API não sabe do estado nem do redux
- 109.
- 110. Effects RxJS <3 Payload éa resposta do servidor
- 111.
- 112. Auth + Múltiplosmódulos com Firebase
- 113.
- 114.
- 115. Projeto com váriosmódulos?
- 116. combine reducers eestados @ngrx/store v2.2
- 117. store.select de umpedaço do estado
- 118. store.select de umpedaço do estado reselect
- 119.
- 120. combine reducers eestados - AppState
- 121.
- 122. @ngrx/platform (v4: beta) Injetao estado do módulo no AppState apenas depois que o módulo for carregado via lazy loading
- 123.
- 124. Prós e Contras: 1.Fluxounidirecional ✅ 2.Debug volta ao tempo (DevTools) ✅ 3.Separação do código ✅ 4.Fácil debug e bug fix (1, 2, e 3) ✅ 5.Mais fácil pra testar devido à funções puras ✅ 6.Melhor performance (onPush) ✅ 7.Serialização do estado ✅ 8.Mais uma camada == mais código ⛔
- 125.
- 126. Gerenciamento de estadoprevisível Fácil de testar (estado imutável + DI) Desacoplado de formatos de mensagem e servidor Serviços não sabem do estado da aplicação Sistema modular + lazy loading
- 127. Pra estudar mais… •https://angular.io/docs/ts/latest/guide/reactive-forms.html • https://angular.io/docs/ts/latest/guide/server-communication.html • https://angular.io/docs/ts/latest/guide/router.html • https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/categories.md • https://gist.github.com/btroncone/d6cf141d6f2c00dc6b35 • http://rxmarbles.com/ • http://reactivex.io/documentation/operators • https://github.com/ngrx • https://github.com/ngrx/example-app • https://auth0.com/blog/understanding-angular-2-change-detection/ • http://blog.brecht.io/A-scalable-angular2-architecture/ • http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2- application-architecture/
- 128. Código dos exemplos https://github.com/loiane/angular-redux-ngrx-examples •angular-ngrx-counter • angular-ngrx-todo (com backend em node.js) • angular-ngrx-auth-firebase (auth e roteamento) • angular-ngrx-lms-firebase (auth, roteamento, múltiplos reducers, lazy loading) https://github.com/loiane/angular-change-detection-example
- 129. Quer aprender maissobre Angular (2.x e 4.x)? /loianegroner
- 130.
- 132.