sstate / lcars

A queued flux dispatcher

LCARS

A queued flux dispatcher

Demo [source] [live demo]

Install

npm install lcars

Usage

LCARS is a dispatcher that uses facebook's flux dispatcher. We are not re-creating our own version of flux, but providing some of the implementation details you might need to get started with flux.

It is common in flux applications to have one dispatcher. That is how we use it, but in practice, you could have more than one. We feel to follow flux, and to make your application easier to follow, it is a good practice to only have one. Be cautious of this. Please read this if you havent yet.

The place that dispatchers are mostly used is in your Action Creator and Stores.

Example

# /actions/HelloWorldActionCreator.js

var LCARS = require('lcars');
var HelloWorldConstants = require('./../constants/HelloWorldConstants');

var HelloWorldActionCreator = {
  updateAge: function(data){
    LCARS.dispatch({
      type: HelloWorldConstants.DemoActions.SET_AGE,
      data: data
    })
  }
};

module.exports = HelloWorldActionCreator;

When you call HelloWorldActionCreator.updateAge({age: 30}), your dispatcher (LCARS) will register callbacks that you can respond to.

# /stores/HelloWorldStore.js

'use strict';

var LCARS = require('lcars');
var CargoBay = require('cargo-bay');
var HelloWorldConstants = require('./../constants/HelloWorldConstants');
var merge = require('amp-merge');

var HelloWorldData = {
  _data: {
    name: "Bob",
    age: undefined
  },
  clonedData: function() {
    return JSON.parse(JSON.stringify(this._data));
  }
};

var _setAge = function(age){
  var data = HelloWorldData.clonedData();
  data.age = age;
  HelloWorldData._data = data;
  return HelloWorldData.clonedData();
};

var HelloWorldStore =  merge(CargoBay, {
  getDataFromStore: function(){
    return HelloWorldData.clonedData();
  }
});

HelloWorldStore.dispatchToken = LCARS.register(function(action){
  switch (action.type){
    case HelloWorldConstants.DemoActions.SET_AGE:
      _setAge(action.data.age);
      HelloWorldStore.emitChange();
      break;
  }
});

module.exports = HelloWorldStore;

You can see an example of this in freighter.

To contribute

npm install

npm test