Intro to Flux - ReactJS Warsaw #1
Download as PPTX, PDF3 likes3,226 views
This document provides an introduction to Flux, describing it as an architecture pattern for one-way data binding that is framework agnostic. It explains the key components of Flux including Stores, Actions, Dispatcher, Smart Components, and Dumb Components. Stores contain the application state, Actions are used to invoke state changes by passing arguments to the Dispatcher, and there is only one Dispatcher. Smart Components are aware of the Store and listen for changes, while Dumb Components only display data passed in via props. Examples of when to use Flux include for single page apps and complex UIs, while simpler components or static sites may not need it. Redux is recommended as a common Flux implementation.
Intro to Flux - ReactJS Warsaw #1
- 1. Intro to Flux Damian Legawiec CEO of Spark Solutions @damianlegawiec
- 4. What is Flux? Framework? Library? Kinda :)
- 5. What is Flux? Architecture Pattern
- 6. What is Flux? Architecture Pattern One Way Data Binding
- 7. What is Flux? Architecture Pattern One Way Data Binding Framework Agnostic
- 8. What is Flux? Architecture Pattern One Way Data Binding Framework Agnostic Not MVC :)
- 10. Store Model?
- 11. Store Model?
- 15. Store Application State Container Can be used with ORM
- 16. Store Application State Container Can be used with ORM Simple JavaScript object enhanced by EventEmitter or MicroEvent
- 17. Actions Used to invoke Change of state
- 18. Actions Used to invoke Change of state Invoked from Views (Components in React) Actions
- 19. Actions Used to invoke Change of state Invoked from Views (Components in React) They pass arguments (payload) to Dispatcher Actions
- 20. Dispatcher There can be only one! Actions
- 21. Dispatcher There can be only one! Dispatches Actions to the Store DispatcherActions
- 22. Smart Components Aware of Store
- 23. Smart Components Aware of Store Listen for Store change
- 24. Smart Components Aware of Store Listen for Store change Data is in State
- 25. Smart Components Aware of Store Listen for Store change Data is in State Pass data via props to Dumb Components
- 26. Dumb Components Only display data passed in props
- 27. Single Page App Example https://greetabl.com/builder
- 29. When to use Flux? Single Page App Complex UI Real World apps :)
- 30. When not to use Flux? Learning React :) Simple components enhancing static site
- 31. What is Flux implementation use? Short Answer REDUX
- 32. What is Flux implementation use? Long Answer
- 33. What is Flux implementation use? 1. Start with official Facebook one 2. Choose between more conventional ones (Reflux, Alt) or bleeding edge Redux
- 34. Future reading List 1. https://facebook.github.io/flux/docs/o verview.html#content 2. http://blog.andrewray.me/flux-for- stupid-people/
- 35. Thanks for your attention!