Redux in Angular2 for jsbe
•Transferir como PPTX, PDF•
1 gostou•767 visualizações
Talk I gave at http://jsbe.io about Redux in Angular 2 applications
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (8)
Semelhante a Redux in Angular2 for jsbe
Semelhante a Redux in Angular2 for jsbe (20)
Último
Último (20)
Redux in Angular2 for jsbe
- 1. Redux in Angular 2 Hi I’m Brecht! @brechtbilliet http://brecht.io Frontend software architect/coach/trainer
- 2. As the title might reveal…
- 3. Redux is not only for React…
- 4. It’s a state management library/principle
- 5. It’s a state management library/principle
- 6. It’s a state management library/principle Redux has multiple implementations
- 7. Redux principle • Reducers • Actions
- 8. Redux principle • Reducers • Actions This is redux related code, it’s just JS
- 9. Redux principle View Store • Reducers • Actions State This is redux related code, it’s just JS
- 10. Redux principle View Store • Reducers • Actions State Dispatch action This is redux related code, it’s just JS
- 11. Redux principle View Store • Reducers • Actions State Dispatch action Update state with reducers This is redux related code, it’s just JS
- 12. Redux principle View Store • Reducers • Actions State Dispatch action Update state with reducers This is redux related code, it’s just JS Update view
- 13. Angular 2 app cars: […] bikes: […] store
- 14. Angular 2 app cars: […] bikes: […] store
- 15. Angular 2 app store cars: […] bikes: […] Subscribes to store.cars Subscribes to store.bikes
- 16. Angular 2 app store cars: […] bikes: […] @Input cars … Subscribes to store.cars Subscribes to store.bikes
- 17. Angular 2 app store cars: […] bikes: […] @Input cars @Input cars … … Subscribes to store.cars Subscribes to store.bikes
- 18. Angular 2 app …… store cars: […] bikes: […] @Input cars @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes
- 19. Angular 2 app …… store cars: […] bikes: […] @Input cars @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes @Input bikes …
- 20. Angular 2 app …… store cars: […] bikes: […] @Input cars … … @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes @Input bikes … @Input bike x @Input bike y
- 21. Angular 2 app …… store cars: […] bikes: […] @Input cars … … @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes @Input bikes @Input bike x @Input bike y …
- 22. … Angular 2 app …… store cars: […] bikes: […] @Input cars … … @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes @Input bikes @Input bike x @Input bike y
- 23. … Angular 2 app …… store cars: […] bikes: […] @Input cars … … @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes @Input bikes @Input bike x @Input bike y @Output addBike(bike)
- 24. … Angular 2 app …… store cars: […] bikes: […] @Input cars … … @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes @Input bikes @Input bike x @Input bike y Dispatch {type:ADD_BIKE: payload: {bike}} @Output addBike(bike)
- 25. … Angular 2 app …… @Input cars … … @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes @Input bikes @Input bike x @Input bike y Dispatch {type:ADD_BIKE: payload: {bike}} store cars: […] bikes: […] @Output addBike(bike)
- 26. … Angular 2 app …… @Input cars … … @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes @Input bikes @Input bike x @Input bike y store cars: […] bikes: […]
- 27. … Angular 2 app …… @Input cars … … @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes @Input bikes @Input bike x @Input bike y store cars: […] bikes: […]
- 28. … Angular 2 app …… @Input cars … … @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes @Input bikes @Input bike x @Input bike y store cars: […] bikes: […]
- 29. … Angular 2 app …… @Input cars … … @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes @Input bikes @Input bike x @Input bike y store cars: […] bikes: […] … @Input bike z
- 30. Redux for Angular 2 • I use @ngrx/store • Rob Wormald • embraces RXJS, select observables from the store • Especially written for Angular 2 • Has it’s own devtools • You can reuse all your actions and reducers
- 31. Presentation layer: Angular 1 Angular 2 React … State management layer Redux implementation Business logic
- 32. Presentation layer: Angular 1 Angular 2 React … State management layer Redux implementation Business logic Redux impl
- 33. Presentation layer: Angular 1 Angular 2 React … State management layer Redux implementation Business logic @ngrx/ store
- 34. Only one line of code @NgModule({ imports: […, StoreModule.provideStore(reducer)] }) export class AppModule { } Use StoreModule.provideStore to register with Angular ... export class ApplicationContainer { constructor(private store: Store<ApplicationState>) { } } It’s available everywhere if you inject “Store”
- 35. With basic redux export class ApplicationContainer implements OnDestroy { sidebarCollapsed = false; topbarCollapsed = false; tweets: Array<Tweet> = []; private storeSubscription: Subscription; constructor(private store: Store<ApplicationState>) { this.storeSubscription = this.store.subscribe((state: ApplicationState) => { this.sidebarCollapsed = state.sidebarCollapsed; this.topbarCollapsed = state.topbarCollapsed; this.tweets = state.tweets; }); } ngOnDestroy(): void { this.storeSubscription.unsubscribe(); } }
- 36. With @ngrx/store export class ApplicationContainer { sidebarCollapsed$ = this.store.select(state => state.sidebarCollapsed); topbarCollapsed$ = this.store.select(state => state.topbarCollapsed); tweets$ = this.store.select(state => state.tweets); constructor(private store: Store<ApplicationState>) { } } • Less code • Select streams • Async pipe: No more unsubscribes
- 37. With @ngrx/store @Component({ selector: "application", directives: [StoreLogMonitorComponent, SidebarComponent, TopbarComponent, ContentComponent], template: ` <sidebar [class.sidebar-collapsed]="sidebarCollapsed$|async" [isCollapsed]="sidebarCollapsed$|async" [starredTweets]="starredTweets$|async" (toggleCollapse)="onToggleCollapseSidebar()"> </sidebar> ... ` })
- 38. Still got a treat for you!
- 39. Dev tools • @ngrx/store-devtools,@ngrx/store-log-monitor @NgModule({ … providers: [ instrumentStore({ monitor: useLogMonitor({ visible: false, position: "right" }) }) ] }) export class AppModule { } @Component({ selector: "application", directives: [StoreLogMonitorComponent, …], template: ` ... <ngrx-store-log-monitor toggleCommand="ctrl-t" positionCommand="ctrl-m"> </ngrx-store-log-monitor> })
- 40. In browser
- 41. Demo time
- 42. Thank you so much! https://github.com/brechtbilliet/jsbe_talk
- 43. Questions?