React Using ReactJS in Flux way Data Flow
Example
This is outline of comprehensive Overview.
Flux pattern assumes the use of unidirectional data flow.
-
Action — simple object describing action
typeand other input data. -
Dispatcher — single action receiver and callbacks controller. Imagine it is central hub of your application.
-
Store — contains the application state and logic. It registers callback in dispatcher and emits event to view when change to the data layer has occured.
-
View — React component that receives change event and data from store. It causes re-rendering when something is changed.
As of Flux data flow, views may also create actions and pass them to dispatcher for user interactions.
Reverted
To make it more clearer, we can start from the end.
-
Different React components (views) get data from different stores about made changes.
Few components may be called controller-views, cause they provide the glue code to get the data from the stores and to pass data down the chain of their descendants. Controller-views represent any significant section of the page.
-
Stores can be remarked as callbacks that compare action type and other input data for business logic of your application.
-
Dispatcher is common actions receiver and callbacks container.
-
Actions are nothing than simple objects with required
typeproperty.Formerly, you'll want to use constants for action types and helper methods (called action creators).
