Flux architecture
Download as PPT, PDF•0 likes•324 views
![Badr Zaman [Front End , J2EE ], profile picture](https://cdn.slidesharecdn.com/profile-photo-BadrZamanFrontEndJ2E-48x48.jpg?cb=1523579305)
Flux is an architecture that complements React and uses unidirectional data flow to manage application state. It has four main components: Actions, a Dispatcher, Stores, and Controller Views. Actions are helper methods that pass data to the Dispatcher. The Dispatcher broadcasts payloads to registered callbacks in Stores, which contain application state and logic. Controller Views are React components that retrieve state from Stores and pass it as props to child components.
Flux architecture
- 1. Flux for React By : Badr Uz Zaman
- 2. What is React? A JavaScript Library to Build UI Build UI Respond to Events (events come from where?) Re-render UI on each change
- 3. Flux Is an architecture that complements React and the concept of Unidirectional Data Flow Manages Application state with the help of Events Uses Dispatcher library and Node Event Emitter module to setup event system
- 4. Flux Components Actions (Helper methods that facilitate passing data to the Dispatcher) Dispatcher (Receives actions and broadcasts payloads to registered callbacks) Stores (Containers for application state & logic that have callbacks registered to the dispatcher) Controller Views (React Components that grab the state from Stores and pass it down via props to child components)
- 6. Flux Dispatcher The Dispatcher is basically the manager of this entire process. It is the central hub for your application. The dispatcher receives actions and dispatches the actions and data to registered callbacks.
- 8. Flux Store In Flux, Stores manage application state for a particular domain within your application. From a high level, this basically means that per app section, stores manage the data, data retrieval methods and dispatcher callbacks.
- 9. Flux Store
- 10. Flux Controller View Controller views are really just React components that listen to change events and retrieve Application state from Stores. They then pass that data down to their child components via props
- 13. Thank You
Editor's Notes
- #2: No fb