simflux


Framework-agnostic, simple Flux wrapper on top of Facebook's Flux

simflux-viz

simflux-viz is a plugin for vizone, a chrome extension and visualization library that aids developers to understand application flow.

how?

var dispatcher = new simflux.Dispatcher();

// an object qualifies to be a store if it has methods
// named the same as the actions it should handle
var appStore = {
  todos: [],
  addTodo: function(todo, priority) { 
    dispatcher.waitFor([otherStore, anotherStore]);
    this.todos.push({
      todo: todo,
      priority: priority
    });
  },
  removeTodo: function(todo) { ... }
}

// register appStore with Flux
dispatcher.registerStore(appStore);

// all async ops should be handled by the Action Creator
var actionCreator = {
  addTodo: function(todo, priority) {
    doSomethingAsync.then(function() {
      dispatcher.dispatch('addTodo', todo, priority);
    });
  }
}

// register appStore with Flux
dispatcher.registerActionCreator(actionCreator);

// in the view: do something!
actionCreator.addTodo({ todo: 'My Todo' }, 'top priority');

why?

• Less boilerplate
• Easier to read

differences

dispatch

Flux:

dispatcher.dispatch( { type: 'ACTION_TYPE', data: { allthe: data} );

simflux:

dispatcher.dispatch('ACTION_TYPE', arg1, arg2, ... );

register, waitFor

Flux:

var todoStore = {
  handleAllActions: function(payload) {
    switch(payload.type) {
      case 'addTodo':
        dispatcher.waitFor([anotherStore.dispatcherToken]);
        ...
        break;
    }
  }
};

todoStore.dispatcherToken = dispatcher.register(todoStore.handleAllActions);

simflux:

var todoStore = {
  addTodo: function(todo) {
    dispatcher.waitFor([anotherStore])
    ...
  }
}

dispatcher.registerStore(todoStore);

access the flux dispatcher

Occasionally, you might want the extra power that Facebook's dispatcher gives you, in which case you can access the instance of the Facebook dispatcher that simflux uses internally via: dispatcher.fluxDispatcher

For example, if you want a store to handle any action that begins with add:

var dispatcher = new simflux.Dispatcher();

var appStore = {
  handleActions: function(payload) {
    var action = payload.action,
        args = payload.args;
    
    if (action.indexOf('add') === 0) {
        // do something with args
    }
  }
}

// register appStore.handleActions with Flux
dispatcher.fluxDispatcher.register(appStore.handleActions);

demo

• angular-simflux-experiment: Flux in angularjs

• angular-flux-routing-example: Another angularjs demo created for the article Achieving reasonable and scalable routing in AngularJS with Flux

requirements

• Facebook's Flux Implementation