cheatsheets/flux.md

title	layout
Flux	default

Architecture

You have:

• Dispatchers receive actions that get dispatched to its listeners.

• Stores are objects that store data, usually changed from a dispatcher listener.

• Views are React components that listen to Store changes, or emit actions to the dispatcher.

Dispatcher

A dispatcher emits (.dispatch()) events to its listeners (.register(fn)).

var Dispatcher = require('flux').Dispatcher;

d = new Dispatcher()

// send a message
d.dispatch({ a: 'aaa', ... };

// receive
token = d.register(function (payload) {
  payload.a === 'aaa'
})

Ensuring order

You can ensure one listener is fired after another using .waitFor().

token1 = d.register(...);

token2 = d.register(function (payload) {
  // ensure receiver 1 is fired before this
  // can only be used within register(...)
  d.waitFor([ token1 ])
})

Subclassing

Object.assign is the preferred way to subclass Dispatcher (think $.extend).

You can make action creators, which are shortcuts for dispatch().

var Dispatcher = require('flux').Dispatcher;
var assign = require('object-assign');

var AppDispatcher = assign({}, Dispatcher.prototype, {

  // shortcut for dispatching
  handleViewAction: function (action) {
    this.dispatch({
      source: 'VIEW_ACTION',
      action: action
    })
  } 

})

Stores

Stores are just like objects.

var TodoStore = { todos: {} };

Stores and dispatchers

Make Dispatcher and Stores:

d = new Dispatcher();
TabStore = { tab: 'home' };

Dispatch events to alter the store:

d.dispatch({ event: 'changeTab', tab: 'timeline' });

d.register(function (data) {
  if (data.event === 'changeTab') {
    TabStore.tab = data.tab;
  }
});

With Components

Components can listen to Dispatchers.

var TodoApp = React.createClass({
  componentDidMount: function () {
    AppDispatcher.register(...);
  }
});

Also see

• Dispatcher API
• React