Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Flux and redux

357 Aufrufe

Veröffentlicht am

Walk through Flux and Redux design

Veröffentlicht in: Ingenieurwesen
  • Als Erste(r) kommentieren

Flux and redux

  1. 1. Flux & Redux Morgan Cheng
  2. 2. 2006 2010 2013 2015
  3. 3. Problem
  4. 4. More Problem
  5. 5. So, Flux is THE ONE?
  6. 6. “React + Flux can do in just 137 lines what jQuery can do in 10!” “What about thousands of lines of code”
  7. 7. “React + Flux can do in just 137 lines what jQuery can do in 10!” “What about thousands of lines of code”
  8. 8. Predictable
  9. 9. UI = f(state)
  10. 10. UI = f(state)
  11. 11. Uni-Direction Data Flow
  12. 12. Game Time: Let’s Play Flux
  13. 13. Drawbacks of Flux • Inter-dependency among multiple stores • Hard to support Server Side Rendering • Hard to do hot-reloading
  14. 14. Flux is just an idea
  15. 15. So Many Weapons
  16. 16. Redux is Flux
  17. 17. Redux = Reducers + Flux
  18. 18. Reducer (accumulation, input) => new_accumulation (state, action) => new_state
  19. 19. What If I Told You The State is Immutable
  20. 20. Three Principles of Redux • Single Source of Truth • State is read-only • Changes are made with pure functions
  21. 21. Game Time: Let’s Play Redux
  22. 22. Encapsulation Component View Reducer Actions JavaScript SCSS/CSS Images
  23. 23. Code Demo Time
  24. 24. Convention is NOT enough Constraint Matters!
  25. 25. What’s your role?
  26. 26. Thanks Any Questions?

×