React

Flux

React

Application architecture for building user interfaces

React

Pattern

Framework

React

"Flux eschews MVC in favor of a unidirectional data flow."

// from flux website

React

"Flux eschews MVC in favor of a unidirectional data flow."

React

Actions

created by Views

will cause Store to update

Change 'read' book in Books to 'true'

{title: 'Professional Node.js', read: false}

React

Dispatcher

central hub

handles actions

invokes store callbacks

Select the Store resposible to handle the action

React

Stores

have application data

have application state

register a callback with the dispatcher

emit a change event

Change the state of 'read'

from 'false' to 'true'

React

Views

consume data

may retain some state

can trigger Actions

View is notified by Store, 

render() is called,

view is updated with the book (read=true)

React

React

There are several implementations of Flux

Redux

Fluxible

Alt

....

React

https://github.com/gaearon/redux-devtools

React

Resources

Flux overview

Awesome React (flux)

Redux

Dan Abramov's talk about redux @react-europe

Fluxible