Questions And Answers

More Tutorials

React in Flux way

Data Flow

This is outline of comprehensive Overview.

Flux pattern assumes the use of unidirectional data flow.

1. Action — simple object describing action type and other input data.
2. Dispatcher — single action receiver and callbacks controller. Imagine it is central hub of your application.
3. Store — contains the application state and logic. It registers callback in dispatcher and emits event to view when change to the data layer has occurred.
4. 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.


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 type property.
Formerly, you'll want to use constants for action types and helper methods (called action creators).


In this page (written and validated by ) you learned about React in Flux way . What's Next? If you are interested in completing React tutorial, your next topic will be learning about: React Webpack and TypeScript installation.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.