Redux in Angular2 for jsbe

Redux in Angular 2

Hi I’m Brecht!@brechtbilliethttp://brecht.ioFrontend software architect/coach/trainer

As the title might reveal…

Redux is not only for React…

It’s a state management

library/principle

It’s a state management

library/principleRedux 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


Redux principle

View Store


State

Dispatch action


Redux principle

View Store


State

Dispatch actionUpdate statewith reducers


Redux principle

View Store


State

Dispatch actionUpdate statewith reducers


Update view

Angular 2 app

cars: […]bikes: […]

store

Angular 2 appstor

ecars: […]bikes: […]

Subscribes to store.cars

Subscribes to store.bikes

Angular 2 appstor


@Input cars

…



Angular 2 appstor


@Input cars

@Input cars

…

…



Angular 2 app

……

store


@Input cars

@Input cars

@Input car y@Input car x

…

…



Angular 2 app

……

store


@Input cars

@Input cars


…

…



@Input bikes

…

Angular 2 app

……

store


@Input cars

… …

@Input cars


…

…



@Input bikes

…@Input bike x @Input bike y

Angular 2 app

……

store


@Input cars

… …

@Input cars


…

…



@Input bikes

@Input bike x @Input bike y…

…

Angular 2 app

……

store


@Input cars

… …

@Input cars


…

…



@Input bikes

@Input bike x @Input bike y

…

Angular 2 app

……

store


@Input cars

… …

@Input cars


…

…



@Input bikes


@OutputaddBike(bike)

…

Angular 2 app

……

store


@Input cars

… …

@Input cars


…

…



@Input bikes


Dispatch{type:ADD_BIKE: payload: {bike}}@Output

addBike(bike)

…

Angular 2 app

……

@Input cars

… …

@Input cars


…

…



@Input bikes


Dispatch{type:ADD_BIKE: payload: {bike}}

store


@OutputaddBike(bike)

…

Angular 2 app

……

@Input cars

… …

@Input cars


…

…



@Input bikes


store


…

Angular 2 app

……

@Input cars

… …

@Input cars


…

…



@Input bikes


store


…

@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 1Angular 2

React…

State management

layerRedux

implementation

Business logic

Presentation layer:

Angular 1Angular 2

React…

State management

layerRedux

implementation

Business logic

Redux impl

Presentation layer:

Angular 1Angular 2

React…

State management

layerRedux

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

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

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

Still got a treat for you!

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

In browser

Demo time

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

https://github.com/brechtbilliet/jsbe_talk

https://github.com/brechtbilliet/jsbe_talk

Questions?

Redux in Angular2 for jsbe

Technology

Transcript of Redux in Angular2 for jsbe