how to use flux (pattern) in react?
TRANSCRIPT
![Page 1: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/1.jpg)
Flux + React
Rick Mak May 2015
![Page 2: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/2.jpg)
One of the pain
DOM
![Page 3: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/3.jpg)
Direct DOM = painful = BUG
![Page 4: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/4.jpg)
Age of Backbone
Model View
![Page 5: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/5.jpg)
Works Great in small scale
![Page 6: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/6.jpg)
more Model; more View
![Page 7: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/7.jpg)
It is SLOW
![Page 8: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/8.jpg)
Let Optimise it
![Page 9: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/9.jpg)
![Page 10: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/10.jpg)
Say Hello to VirtualDOM
![Page 11: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/11.jpg)
Model Virtual DOM DOM
Interact with VirtualDOM
Data Data
Event Event
![Page 12: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/12.jpg)
setState will trigger render
Define your view
![Page 13: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/13.jpg)
React calculate the diff
• Set state will mark the red dot
• React will find out the blue dots
• Re-render with only the modified dom
Source: https://facebook.github.io/react/img/blog/react-diff-tree.png
![Page 14: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/14.jpg)
Fast without spaghetti
![Page 15: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/15.jpg)
Let focus on Logic
![Page 16: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/16.jpg)
State inconsistency
Very common in single page webapp
![Page 17: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/17.jpg)
State inconsistency
• Server sync not sync with client state
• item missing
• duplicate item
• State between client not sync
• State panic with poor internet
![Page 18: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/18.jpg)
Flux fix that
![Page 19: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/19.jpg)
It is a pattern
A pattern enforcing unidirectional data flow
Flux is not framework
![Page 20: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/20.jpg)
View
Action
Store
Dispatcher
Server
![Page 21: How to use Flux (pattern) in React?](https://reader031.vdocuments.net/reader031/viewer/2022022414/58767ea61a28ab1b158b54d1/html5/thumbnails/21.jpg)
Unidirectional data flow
• Faster debug
• Faster on boarding
• Faster iteration
• Less cascading effect