FluxContextMixin using Fluxxor

FluxContextMixin.js

// Array of constructors for the all registered stores
var registeredStores = [], // List of registered store constructors
  registeredStoreNames = [], // StoreNames
  registeredActions = {}; // Set of registered actionNames

// Keep the register functions in a closure so that 
// there is only one instance of this function irrespective 
// of the number of components the mixin is applied to
function registerStore (store) {
  var self = this,
    p = self.props,
    flux = p.flux,
    registeredName,
    storeName = store.displayName,
    i = 0;

  while (!registeredName && i < registeredStores.length) {
    // Compare constructors to check if the store was already registered
    if (registeredStores[i] === store) {
      registeredName = registeredStoreNames[i];
    }
    i++;
  }

  if (registeredName) {
    console.log('Store was already registered by the name: ' + registeredName);
  } else {
    flux.addStore(storeName, new store());
  
    // Add the store constructor to the list of registered stores
    registeredStores.push(store);
    registeredStoreNames.push(storeName);

    console.log('Registered: ' + storeName);
  }

}

function registerAction (actionMap) {
  var self = this,
    p = self.props,
    flux = p.flux,
    actionName,
    actionNames = Object.keys(actionMap),
    i = 0;

  while (i < actionNames.length) {
    actionName = actionNames[i];
    // Check if the action name was already registered
    if (registeredActions[actionName]) {
      console.log('Action ' + actionName + ' already registered.');
    } else {
      // Add the action name and its handler to the hash
      flux.addAction(actionName, actionMap[actionName]);
      registeredActions[actionName] = true;
      console.log('Registered: ' + actionName);
    }
    i++;
  }
}

module.exports = {
  getInitialState: function () {
    var componentName = this.constructor.displayName,
      stores = this.constructor.stores,
      actions = this.constructor.actions;

    if(stores && Array.isArray(stores) && stores.length > 0) {
      console.log('Registering stores for: ' + componentName);
      stores.forEach(registerStore.bind(this));
    }

    if(actions && Array.isArray(actions) && actions.length > 0) {
      console.log('Registering actions for: ' + componentName);
      actions.forEach(registerAction.bind(this));
    }

    return {};
  }
};

MyComponent.js

/**
 * @jsx React.DOM
 */

var React = require('react/addons'),
  Fluxxor = require('fluxxor'),
  FluxMixin = Fluxxor.FluxMixin(React),
  StoreWatchMixin = Fluxxor.StoreWatchMixin,
  // Our mixin
  FluxContextMixin = require('../../mixins/FluxContextMixin'),
  // Require the stores that you depend on
  MyDataStore = require('../../stores/MyDataStore'),
  // Require the actions that you depend on
  MyDataActions = require('../../actions/MyDataActions'),
  MyComponent;

MyComponent = React.createClass({
  // Adding the FluxContextMixin helps auto register
  // stores and actions in the flux context
  // if they were not already registered
  mixins: [FluxMixin, FluxContextMixin, StoreWatchMixin('MyDataStore')],

  statics: {
    stores: [MyDataStore], // List the stores required by this component
    actions: [MyDataActions] // List the actions required by this component
  },

  // This gets executed by Fluxxor via the StoreWatchMixin
  // through getInitialState
  // We are not really doing anything with it in this example
  getStateFromFlux: function() {
    return {};
  },

  render: function () {
    var self = this,
      p = this.props,
      s = this.state,
      flux = p.flux;

    var uriStore = flux.store('MyDataStore'),
      uriDetails = myDataStore.getState();

    // Our dummy component renders nothing
    // You would probably inspect the data 
    // from a store and render
    // something based upon it
    return (<div/>);
  }

});

module.exports = MyComponent;

MyDataActions.js

module.exports = {
  actionName: function (payload) {

    // Action handler.
    // You will probably perform some operation
    // here using the payload e.g. request an ajax
    // util to interact with your api and then
    // once it returns, inspect the data and dispatch
    // an event into the flux context.

  }
};

MyDataStore.js

var Fluxxor = require('fluxxor'),
  MyDataStore;

var data = {'key': 'default value'};

MyDataStore = Fluxxor.createStore({

  initialize: function() {
    this.bindActions(
      'EVENT_NAME', this.doSomething
    );
  },

  doSomething: function(payload) {
    // Perform any operation on the data
    // using the payload, then emit a change
    this.emit("change");
  },

  getState: function() {
    return uriDetails;
  }

});

// Adding this will help the our mixin uniquely
// identify stores by this name later
MyDataStore.displayName = 'MyDataStore';

module.exports = MyDataStore;