Managing state in Angular 1.x with Redux

ANGULAR 1.X STATE MANAGEMENT

Adam Klein

Adam Klein

• Developing software for past 16 years • I love sharing knowledge • I used to have a Jewfro

CTO @ 500Tech

“A framework takes away the fun of creating our own infrastructure.

But, it adds the fun of complaining about how crappy the framework is, and how better we would have done it ourselves.”

My Quote of the Day

WE NEED APP-WIDE STATE MANAGEMENT

Redux on one leg

state

ui component

middleware

selector

action

reducer

Advantages of ReduxApplication wide State

Decoupled from component structure

Order and Conventions

1 way data flow

Testability

Immutable state

Better change detection

Save previous states

Cache selectors

Angular 1.X + Redux? Really?!

Yes! Really!!

Advantages of ReduxApplication wide State

Decoupled from component structure

Order and Conventions

1 way data flow

Testability

Immutable state

Better change detection

Save previous states

Cache selectors

Angular 1.5 + Immutable = Minor performance gains

$scope.$watch shallow

Using $onChanges

Selectors can still use Immutable power

2 way data bindingAvoid 2 way binding directly to state

Beware of canonical bindings (e.g. ‘user.name’)

Beware of ‘=‘ directive bindings

Use Immutable or SeamlessImmutable

• Use ‘track by’ for ng-repeat (angular adds $$hash)

• Some 3rd party libraries might need the non-immutable version

https://github.com/500tech/ng-redux-example

TipsMiddlewares can use DI (like async actions)

Reducers / Selectors don’t use DI

$scope.$apply after changing state from redux dev tools

ALTERNATIVE: state service

A state serviceStraightforward

Independent of component hierarchy

Custom solution

Direct bindings

Use setters and getters

Option: use RX for subscribing to change

https://github.com/500tech/angular-state-example

Read our blog:http://blog.500tech.com

Thank youadam@500tech.com

slideshare.net/500tech