Data Flow in react / react-native

I gave talk about data flow in react and react native in mumbai javascript-ruby meetup on 31st October 2015

Transcript

1. Data Flow in React/ React-Native
2. whoami ? I am Chetan Dhembre. Software developer @crowdfire Twitter : @ichetandhembre Github : chetandhembre
3. react(data)=> UI 3
4. Data View View View View View View
5. Data View View View View View View
6. Flux Architecture
7. Data View
8. Stores View
9. Stores !== Model not a observable object (View subscribe to store) only access data using getter method (ex. no model.balance but store.getBalance()) Can not edit data directly like Model so model.balance = 10 not possible
10. Stores View Action
11. Stores View Action Dispatcher
12. Stores View Action Dispatcher Server
13. Stores View Action Dispatcher action ={ type: ‘ADD_TASK’, text: ‘Do yoga’ }
14. Stores View Action Dispatcher action ={ type: ‘ADD_TASK’, text: ‘Do yoga’ } ToDos =[ { id:1, text: ‘Do yoga’, iscomplete : false } ]
15. Stores View Action Dispatcher action ={ type: ‘COMEPLTE_TA SK’, id:1 }
16. Stores View Action Dispatcher action ={ type: ‘COMEPLTE_TA SK’, id:1 } ToDos =[ { id:1, text: ‘Do yoga’, iscomplete : true } ]
17. What about multiple Stores ?
18. ToDo View Action Dispatcher Profile View User : { total : 1, remaining: 1 } Todos :[ { id : 1, text : ‘Do yoga’, iscompleted : 0 } ]
19. ToDo View Action Dispatcher Profile View User : { total : 1, remaining: 0 } Todos :[ { id : 1, text : ‘Do yoga’, iscompleted : 1 } ] Action : { type : ‘COMPLETE_TASK’, id: 1 }
20. What is Flux ? Unidirectional data flow Multiple Stores It is specification
21. Redux
22. What is Redux ? Implementation of flux (!?) Single Store (Single source of truth) Immutable not have the concept of a Dispatcher
23. Stores (dispatcher) View Action Reducer
24. Store Single source of truth dispatch function inside
25. Reducer ? (previousState, action) => newState
26. Thank You !! Questions ?