Ok let me explain you from Step by Step
1 What is Flux?
- A pattern
- Centralized dispatcher
- Unidirectional data flows
- List item
They call it Flux for a reason too.
- Facebook’s Flux
A Chat with Flux
React : Hey Action, someone clicked this “Save Course” button.
Action: Thanks React! I registered an action creator with the dispatcher, so the dispatcher should take care of notifying all the stores that care.
Dispatcher :Let me see who cares about a course being saved. Ah! Looks like the Store has registered a callback with me, so I’ll let her know.
Store : Hi dispatcher! Thanks for the update! I’ll update my data with the payload you sent. Then I’ll emit an event for the React components that care.
React : Ooo! Shiny new data from the store! I’ll update the UI to reflect this!
register(function callback) –“Hey dispatcher, run me when actions happen. -Store”
unregister(string id) –“Hey dispatcher, stop worrying about this action. -Store”
waitFor(array ids) –“Update this store first. –Store”
dispatch(object payload) -“Hey dispatcher, tell the stores about this action. -Action”
isDispatching() –“I’m busy dispatching callbacks right now.”
so the the question raise in our mind is
So Flux Is a Publish-Subscribe Model?
Differs in two ways:
1.Every payload is dispatched to all registered callbacks.
2.Callbacks can wait for other callbacks
Flux is a pattern for unidirectional data flows
Actions encapsulate events
Dispatcher is a central hub that holds callbacks
Stores hold app state