A Guide to Redux + Angular

Transcript

1. 1.

   A Guide to Angular + Redux Pavithra Kodmad @pkodmad

2. 2.

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

3. 3.

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

4. 4.

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

5. 5.

   Problems to solve Hard to discover functionality and test

6. 6.

   Problems to solve ES6 (Modules and spread op)

7. 7.

   Redux Primer

8. 8.

   Redux Single immutable application state

9. 9.

   Redux State is held by Redux Store

10. 10.

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

11. 11.

    Redux Reducer (state, action) => state

12. 12.

    Redux

13. 13.

    Redux Actions are dispatched by Composable View (Here Angular)

14. 14.

    Redux

15. 15.

    Redux View subscribes to state changes Refreshes itself

16. 16.

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

17. 17.

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

18. 18.

    ng-redux

19. 19.

    ng-redux

20. 20.

    ng-redux

21. 21.

    ng-redux

22. 22.

    Problems solved Unclear Data Flow with double binding Non-isolated child

    scope Component communication Hard to test
23. 23.

    None
24. 24.

    What about ES6?

25. 25.

    ES6 + Angular

26. 26.

    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
27. 27.

    A Guide to Angular + Redux Pavithra Kodmad @pkodmad