Angular and the Single Immutable State Tree

Links:

- https://medium.com/google-developer-experts/angular-2-introduction-to-redux-1cf18af27e6e#.8ikpkiqln
- https://github.com/ngrx/store
- https://victorsavkin.com/post/137821436516/managing-state-in-angular-2-applications

Transcript

1. Hallo
2. UI Model {…} APPLICATION STATE MANAGEMENT ? sync
3. BIDIRECTIONAL (two way) data binding
4. UNIDIRECTIONAL data flow
5. Redux
6. single IMMUTABLE the STATE tree &
7. Ciro Nunes FRONTEND ENGINEER @cironunesdev
8. Belo Horizonte
10. AGENDA
11. 1. Problems with mutable objects AGENDA
12. 1. Problems with mutable objects 2. Using immutable objects AGENDA
13. 1. Problems with mutable objects 2. Using immutable objects 3. The single immutable state tree AGENDA
14. MUTABLE OBJECTS make TRACKING hard CHANGES
15. @Component({+ ++selector:+'my3person',+ ++template:+`+ +++{{+person.name+}}+lives+at+{{+address.street+}},+{{+address.city+}}+ ++`+ })+ export+class+MyPerson+{+ ++@Input()+person:+{+name:+string+};+ ++@Input()+address:+{+city:+string,+street:+string+}+ } my-person.component.ts
16. @Component({+ ++template:+`+ +++{{+person.name+}}+lives+at+{{+address.street+}},+{{+address.city+}}+{{+zipCode+}}+ ++`+ })+ export+class+MyPerson+{+ ++@Input()+person:+{+name:+string+};+ ++@Input()+address:+{+city:+string,+street:+string+};+ ++zipCode:+number;+ ++ngOnChanges(inputChanges)+{+ ++++if+(inputChanges.address)+{+ ++++++this.zipCode+=+this.zipCodes(this.address);+ ++++}+ ++}+ } my-greeting.component.ts
17. PROBLEMS WITH MUTABLE OBJECTS
18. 1. Other components can change it not propagating the change PROBLEMS WITH MUTABLE OBJECTS
19. MUTABLE OBJECTS can LEAD issues PERFORMANCE to
20. @Component({+ ++selector:+'my3person',+ ++template:+`+ +++{{+person.name+}}+lives+at+{{+address.street+}},+{{+address.city+}}+{{+zipCode+}}+ ++`+ })+ export+class+MyPerson+{+ ++@Input()+person:+{+name:+string+};+ ++@Input()+address:+{+city:+string,+street:+string+};+ ++zipCode:+number;+ ++ngOnChanges(inputChanges)+{+ ++++if+(inputChanges.address)+{+ ++++++this.zipCode+=+this.zipCodes(this.address);+ ++++}+ ++}+ } my-greeting.component.ts
21. 1. Other components can change it not propagating the change PROBLEMS WITH MUTABLE OBJECTS
22. 1. Other components can change it not propagating the change PROBLEMS WITH MUTABLE OBJECTS 2. The framework needs to be conservative
23. IMMUTABLE OBJECTS win THE for
24. IMMUTABLE OBJECTS references NEW creates
26. let+person+=+Immutable.Map({+ ++name:+'Ciro',+ ++address:+{+ ++++street:+'Gardenia',+ ++++city:+'Belo+Horizonte'+ ++}+ });+ function+changeAddressStreet(person,+newStreet)+{+ ++return+person.setIn(['address'],+{+ ++++street:+newStreet,+ ++++city:+person.toJS().address.city+ ++});+ }+ let+newAddress+=+changeAddressStreet(person,+'New+Address'); pure-function—sample.ts
27. let+person+=+Immutable.Map({+ ++name:+'Ciro',+ ++address:+{+ ++++street:+'Gardenia',+ ++++city:+'Belo+Horizonte'+ ++}+ });+ function+changeAddressStreet(person,+newStreet)+{+ ++return+person.setIn(['address'],+{+ ++++street:+newStreet,+ ++++city:+person.toJS().address.city+ ++});+ }+ let+newAddress+=+changeAddressStreet(person,+'New+Address’); pure-function—sample.ts
28. let+person+=+Immutable.Map({+ ++name:+'Ciro',+ ++address:+{+ ++++street:+'Gardenia',+ ++++city:+'Belo+Horizonte'+ ++}+ });+ function+changeAddressStreet(person,+newStreet)+{+ ++return+person.setIn(['address'],+{+ ++++street:+newStreet,+ ++++city:+person.toJS().address.city+ ++});+ }+ let+newAddress+=+changeAddressStreet(person,+'New+Address’); pure-function—sample.ts PURE FUNCTION
29. ADVANTAGES OF IMMUTABLE OBJECTS
30. 1. Tracking changes made easy ADVANTAGES OF IMMUTABLE OBJECTS
31. App Todos MyGreeting Todo Todo • person • address • zipcode
32. my-person.component.ts @Component({+ ++selector:+'my3person',+ ++template:+`+ +++{{+person.name+}}+lives+at+{{+address.street+}},+{{+address.city+}}+{{+zipcode+}}+ ++`,+ ++changeDetection:+ChangeDetectionStrategy.OnPush+ })+ export+class+MyPerson+{+ ++@Input()+person:+{+name:+string+};+ ++@Input()+address:+{+city:+string,+street:+string+}+ ++zipCode:+number;+ ++ngOnChanges(inputChanges)+{+ ++++if+(inputChanges.address)+{+ ++++++this.zipCode+=+this.zipCodes(this.address);+ ++++}+ ++}+ }
33. 1. Tracking changes made easy ADVANTAGES OF IMMUTABLE OBJECTS
34. 1. Tracking changes made easy ADVANTAGES OF IMMUTABLE OBJECTS 2. Able to skip checks, results in better performance
35. single IMMUTABLE the STATE tree &
36. Redux
37. THE SINGLE IMMUTABLE STATE TREE
38. 1. Unidirectional data flow THE SINGLE IMMUTABLE STATE TREE
39. 1. Unidirectional data flow THE SINGLE IMMUTABLE STATE TREE 2. Changes are made using pure functions (reducers)
40. Actions Reducers Store View REDUX UNIDIRECTIONAL
 DATA FLOW subscribe dispatch
41. Actions Reducers Store View REDUX UNIDIRECTIONAL
 DATA FLOW JS objects subscribe dispatch
42. Actions Reducers Store View REDUX UNIDIRECTIONAL
 DATA FLOW JS objects subscribe dispatch
43. Actions Reducers Store View REDUX UNIDIRECTIONAL
 DATA FLOW JS objects Pure functions subscribe dispatch
44. 1. Always produce the same output given the same input PURE FUNCTIONS 2. Don’t produce side-effects (e.g: mutate state)
45. const+initialState+=+{+ ++todos:+[],+ ++currentFilter:+'SHOW_ALL'+ };+ function+rootReducer(state+=+initialState,+action)+{+ ++switch+(action.type)+{+ ++++case+'ADD_TODO':++ ++++++++return+{+ ++++++++++todos:+[...todos,+newTodo],+ ++++++++++currentFilter:+state.currentFilter+ ++++++++}+ ++++++++break;+ ++++default:++ ++++++return+state;+ ++}+ }; root-reducer.ts
46. const+initialState+=+{+ ++todos:+[],+ ++currentFilter:+'SHOW_ALL'+ };+ function+rootReducer(state+=+initialState,+action)+{+ ++switch+(action.type)+{+ ++++case+'ADD_TODO':++ ++++++++return+{+ ++++++++++todos:+[...todos,+newTodo],+ ++++++++++currentFilter:+state.currentFilter+ ++++++++};+ ++++++++break;+ ++++default:++ ++++++return+state;+ ++}+ }; root-reducer.ts
47. Actions Reducers Store View REDUX UNIDIRECTIONAL
 DATA FLOW JS objects Pure functions subscribe dispatch
48. Actions Reducers Store View REDUX UNIDIRECTIONAL
 DATA FLOW JS objects Pure functions Application state subscribe dispatch
49. import+{createStore}+from+'redux';+ import+{rootReducer}+from+'./root3reducer';+ const+appStore+=+createStore(rootReducer);+ appStore.subscribe(callback);+ appStore.dispatch(action);+ appStore.getState(); app-store.ts
50. import+{createStore}+from+'redux';+ import+{rootReducer}+from+'./root3reducer';+ import+{Actions}+from+'./actions';+ const+appStore+=+createStore(rootReducer);+ bootstrap(App,+[+ ++provide('AppStore',+{useValue:+appStore}),+ ++Actions+ ]); app-store.ts
52. OTHER OPTIONS TO REDUX
53. 1. ngrx/@store OTHER OPTIONS TO REDUX
54. 1. ngrx/@store OTHER OPTIONS TO REDUX 2. Victor Savkin’s implementation using observables
57. IN SUMMARY
58. Mutable objects are bad for modelling application state IN SUMMARY
59. Mutable objects are bad for modelling application state IN SUMMARY Immutable objects makes it easy to track changes
60. Mutable objects are bad for modelling application state IN SUMMARY Immutable objects makes it easy to track changes Angular 2 CD mechanism makes it even faster
61. Mutable objects are bad for modelling application state IN SUMMARY Immutable objects makes it easy to track changes Angular 2 CD mechanism makes it even faster Redux is awesome, but there are other great options
62. THANKS TO @gsans @PascalPrecht
63. Dankjewel