Redux in Angular2 for jsbe

Redux in Angular 2 Hi I’m Brecht! @brechtbilliet http://brecht.io Frontend software architect/coach/trainer

Redux is not only for React…

It’s a state management library/principle

It’s a state management library/principle Redux has multiple implementations

Redux principle • Reducers • Actions

Redux principle • Reducers • Actions This is redux related code, it’s just JS

Redux principle View Store • Reducers • Actions State This is redux related code, it’s just JS

Redux principle View Store • Reducers • Actions State Dispatch action This is redux related code, it’s just JS

Redux principle View Store • Reducers • Actions State Dispatch action Update state with reducers This is redux related code, it’s just JS

Redux principle View Store • Reducers • Actions State Dispatch action Update state with reducers This is redux related code, it’s just JS Update view

Angular 2 app cars: […] bikes: […] store

Angular 2 app store cars: […] bikes: […] Subscribes to store.cars Subscribes to store.bikes

Angular 2 app store cars: […] bikes: […] @Input cars … Subscribes to store.cars Subscribes to store.bikes

Angular 2 app store cars: […] bikes: […] @Input cars @Input cars … … Subscribes to store.cars Subscribes to store.bikes

Angular 2 app …… store cars: […] bikes: […] @Input cars @Input cars @Input car y @Input car x … … Subscribes to store.cars Subscribes to store.bikes

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 …

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

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 …

… 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

… 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)

… 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)

… 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)

… 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: […]

… 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

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

Presentation layer: Angular 1 Angular 2 React … State management layer Redux implementation Business logic

Presentation layer: Angular 1 Angular 2 React … State management layer Redux implementation Business logic Redux impl

Presentation layer: Angular 1 Angular 2 React … State management layer Redux implementation Business logic @ngrx/ store

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”

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(); } }

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

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> ... ` })

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> })

Thank you so much! https://github.com/brechtbilliet/jsbe_talk

Redux in Angular2 for jsbe

More Related Content

What's hot

Viewers also liked

Similar to Redux in Angular2 for jsbe

Recently uploaded

Redux in Angular2 for jsbe