Slide 1

Slide 1 text

A Guide to Angular + Redux Pavithra Kodmad @pkodmad

Slide 2

Slide 2 text

Problems to solve Unclear Data Flow with double binding (ngModel/ngRepeat)

Slide 3

Slide 3 text

Problems to solve Non-isolated child scope scope: {}

Slide 4

Slide 4 text

Problems to solve Component communications $emit/$broadcast/watch

Slide 5

Slide 5 text

Problems to solve Hard to discover functionality and test

Slide 6

Slide 6 text

Problems to solve ES6 (Modules and spread op)

Slide 7

Slide 7 text

Redux Primer

Slide 8

Slide 8 text

Redux Single immutable application state

Slide 9

Slide 9 text

Redux State is held by Redux Store

Slide 10

Slide 10 text

Redux http://gaearon.github.io/the-redux-journey/

Slide 11

Slide 11 text

Redux Reducer (state, action) => state

Slide 12

Slide 12 text

Redux

Slide 13

Slide 13 text

Redux Actions are dispatched by Composable View (Here Angular)

Slide 14

Slide 14 text

Redux

Slide 15

Slide 15 text

Redux View subscribes to state changes Refreshes itself

Slide 16

Slide 16 text

Redux https://twitter.com/thekitze/status/727821044308967425

Slide 17

Slide 17 text

ng-redux - Angular bindings to redux $ngRedux.createStoreWith(rootReducer) $ngRedux.connect()($scope) https://github.com/angular-redux/ng-redux

Slide 18

Slide 18 text

ng-redux

Slide 19

Slide 19 text

ng-redux

Slide 20

Slide 20 text

ng-redux

Slide 21

Slide 21 text

ng-redux

Slide 22

Slide 22 text

Problems solved Unclear Data Flow with double binding Non-isolated child scope Component communication Hard to test

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

What about ES6?

Slide 25

Slide 25 text

ES6 + Angular

Slide 26

Slide 26 text

Resources Angular redux Todomvc https://github.com/kalcifer/todomvc/tree/angular-redux Ng-redux https://github.com/angular-redux/ng-redux About using ng-redux http://blog.rangle.io/managing-state-redux-angular/ Redux https://egghead.io/redux Babelify https://github.com/babel/babelify

Slide 27

Slide 27 text

A Guide to Angular + Redux Pavithra Kodmad @pkodmad