redux in angular2 for jsbe
TRANSCRIPT
![Page 1: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/1.jpg)
Redux in Angular 2
Hi I’m Brecht!@brechtbilliethttp://brecht.ioFrontend software architect/coach/trainer
![Page 2: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/2.jpg)
As the title might reveal…
![Page 3: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/3.jpg)
Redux is not only for React…
![Page 4: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/4.jpg)
It’s a state management
library/principle
![Page 5: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/5.jpg)
It’s a state management
library/principle
![Page 6: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/6.jpg)
It’s a state management
library/principleRedux has multiple implementations
![Page 7: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/7.jpg)
Redux principle• Reducers• Actions
![Page 8: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/8.jpg)
Redux principle• Reducers• Actions
This is redux related code, it’s just JS
![Page 9: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/9.jpg)
Redux principle
View Store
• Reducers• Actions
State
This is redux related code, it’s just JS
![Page 10: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/10.jpg)
Redux principle
View Store
• Reducers• Actions
State
Dispatch action
This is redux related code, it’s just JS
![Page 11: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/11.jpg)
Redux principle
View Store
• Reducers• Actions
State
Dispatch actionUpdate statewith reducers
This is redux related code, it’s just JS
![Page 12: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/12.jpg)
Redux principle
View Store
• Reducers• Actions
State
Dispatch actionUpdate statewith reducers
This is redux related code, it’s just JS
Update view
![Page 13: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/13.jpg)
Angular 2 app
cars: […]bikes: […]
store
![Page 14: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/14.jpg)
Angular 2 app
cars: […]bikes: […]
store
![Page 15: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/15.jpg)
Angular 2 appstor
ecars: […]bikes: […]
Subscribes to store.cars
Subscribes to store.bikes
![Page 16: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/16.jpg)
Angular 2 appstor
ecars: […]bikes: […]
@Input cars
…
Subscribes to store.cars
Subscribes to store.bikes
![Page 17: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/17.jpg)
Angular 2 appstor
ecars: […]bikes: […]
@Input cars
@Input cars
…
…
Subscribes to store.cars
Subscribes to store.bikes
![Page 18: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/18.jpg)
Angular 2 app
……
store
cars: […]bikes: […]
@Input cars
@Input cars
@Input car y@Input car x
…
…
Subscribes to store.cars
Subscribes to store.bikes
![Page 19: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/19.jpg)
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
…
![Page 20: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/20.jpg)
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
![Page 21: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/21.jpg)
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…
![Page 22: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/22.jpg)
…
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
![Page 23: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/23.jpg)
…
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
@OutputaddBike(bike)
![Page 24: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/24.jpg)
…
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)
![Page 25: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/25.jpg)
…
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: […]
@OutputaddBike(bike)
![Page 26: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/26.jpg)
…
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: […]
![Page 27: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/27.jpg)
…
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: […]
![Page 28: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/28.jpg)
…
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: […]
![Page 29: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/29.jpg)
…
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
![Page 30: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/30.jpg)
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
![Page 31: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/31.jpg)
Presentation layer:
Angular 1Angular 2
React…
State management
layerRedux
implementation
Business logic
![Page 32: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/32.jpg)
Presentation layer:
Angular 1Angular 2
React…
State management
layerRedux
implementation
Business logic
Redux impl
![Page 33: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/33.jpg)
Presentation layer:
Angular 1Angular 2
React…
State management
layerRedux
implementation
Business logic
@ngrx/store
![Page 34: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/34.jpg)
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”
![Page 35: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/35.jpg)
With basic reduxexport 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(); }}
![Page 36: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/36.jpg)
With @ngrx/storeexport 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
![Page 37: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/37.jpg)
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> ...` })
![Page 38: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/38.jpg)
Still got a treat for you!
![Page 39: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/39.jpg)
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>})
![Page 40: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/40.jpg)
In browser
![Page 41: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/41.jpg)
Demo time
![Page 42: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/42.jpg)
Thank you so much!https://github.com/brechtbilliet/jsbe_talk
![Page 43: Redux in Angular2 for jsbe](https://reader035.vdocument.in/reader035/viewer/2022062522/587507961a28ab29208b66f9/html5/thumbnails/43.jpg)
Questions?