Uploaded byBoyan Mihaylov
Flux architecture
Flux is an architecture for building JavaScript applications that promotes unidirectional data flow. The key elements of Flux are the Dispatcher, Stores, and Views. The Dispatcher centralizes the flow of data and dispatches actions to the Stores. Stores contain application state and logic. Views are React components that subscribe to Stores and listen for changes to re-render. Actions define activities and are dispatched by action creators through the Dispatcher to the Stores to update state.
More Related Content
Flux architecture
- 1. Flux architecture BOYAN MIHAYLOV @bmihaylov| hey@boyan.in
- 2. Agenda The status quo TheFlux way What is Flux Key elements DEMO
- 3. The status quo SimpleMVC application Controller Model View manipulates notifies queries action
- 4. The status quo AdvancedMVC application Controller Model View Controller Model Model View View View
- 5. The Flux way SimpleFlux application Dispatcher Store View dispatches action notifies queries actionAction creator callscalls dispatch
- 6. The Flux way AdvancedFlux application Dispatcher Store View actionAction creator Store Store View View View
- 7. What is Flux Accordingto The Free Dictionary http://www.thefreedictionary.com/flux
- 8. What is Flux Theway of building JavaScript applications Promoted by Facebook Design pattern rather than framework Empowers unidirectional flow Objects are highly decoupled (principle of least knowledge)
- 9. Key elements Dispatcher StoreView dispatches action notifies queries actionAction creator callscalls dispatch
- 10. Dispatcher A central hubthat manages all data flow A registry of callbacks ◦ Stores register themselves by providing a callback When a new action arrives, all callbacks are invoked Dispatcher Store register(callback) actionAction creator dispatch(action) callback(action)
- 11. Stores Contain application stateand logic ◦ Similar to repositories Manage a whole domain, rather than a single group of objects Register themselves to the dispatcher with a callback ◦ The callback receives one argument – the action Dispatcher Store View listener() listenForChanges(listener) register(callback) callback(action) query
- 12. Actions and actioncreators Actions define an activity to be performed Typically have type and payload Stores use the action type to determine further processing Action creators are helper methods to create actions ◦ They call also the dispatcher with the newly created action Dispatcher View actionAction creator create-new-action(a, b, c)dispatch(action) { type: ‘new-action’, data: { a: a, b: b, c: c} }
- 13. Views React components Subscribe tostores and listen for changes Ensure one way of data flow ◦ Only one view in a hierarchy listens for changes in the store ◦ Updates all other views underneath in the hierarchy Store Component A queries Action creator create(action) Component B Component C re-render children hasChanged()
- 14.
- 15. Implementations Fluxxor (http://fluxxor.com) marty.js (http://martyjs.org) Reflux(https://github.com/spoike/refluxjs) rx-flux (https://github.com/fdecampredon/rx-flux) ◦ Observable elements using RxJS Omniscient (http://omniscientjs.github.io) ◦ Flavurs immutability using Immutable.js
- 16. Is Flux onlyfor React? No
- 17.
- 18.
- 19.