React Flux Concepts

01_React_Flux_Basics.md

What is Flux?

• Flux is a architectural pattern with a uni-directional data flow and centralized dispatcher.
• It was started by Facaebook
• Flux deals with actions and data changes

Alternatives to Flux

• Alt
• Reflux
• Flummox
• Marty
• Fluxxor
• Delorean
• Redux
• NuclearJS
• Fluxible

The Problem


Two-way Binding vs Uni-Directional Flow


3 Parts of Flux

The Big Picture


02_Flux_Building_Blocks.md

Actions

• Action encapsulates specific events happening in the application (Eg: Save User, Delete Item)
• Triggered by User Interaction or Server
• Passes to dispatcher as helper methods
• Every action payload has Type and Data

Dispatcher

• All data flows through Dispatcher as centralized hub - Singleton (we have only one dispatcher)
• Holds list of callbacks
• Broadcasts payload to registered callbacks
• Sends actions to stores

Constants

* Keep things organized
* Provide high livel view of what the app actually does

Stores

• Store is a centralized place where application state and logic is stored. They don't have direct setter methods, they update via callbacks registered with dispatcher.
• App data store. They hold Application State, logic and data retrival methods
• Not a model. It Contains model
• One or many stores in the app
• Registers Callbacks with the Dispatchers
• Uses Node's EventEmitter

Structure of the Store

Every store has these common traits (interfaces):

1. Extend EventEmitter
2. addChangeListener and removeChangeListener
3. emitChange

Controller View

• Controller View is nothing but Top Level Component that helps composing child components
• They Interacts with Stores, When an Store emits a update, the Controller View should pass the state to children as props
• Holds data in state
• Its recommended not to nest Controller View (Must be kept at top level)

03_Flux_Extras.md

Flux Chat

Flux API - 5 Functions

• register(function callback) - Runs store when actions happen
• unRegister(string id) - Un register store from the specific action
• waitFor(array ids) - Update Store Order
• dispatch(object Payload) - Action notifies dispatcher to update the store
• isDispatching() - Boolean which is true when dispatcher is busy dispatching something

So Flux is Pub-Sub Model ?

Not Quite

Differs in two ways:

• Every Payload is dispatched to all registered callbacks
• Callbacks can wait for other callbacks