GetStoresMixin

GetStoresMixin.js

function findRoutesComponent(component){
  if(component._isRoutesComponent && component._isRoutesComponent()){
    return component;
  }
  if(component._owner){
    return findRoutesComponent(component._owner); 
  }
  return null;
};

var GetStoresMixin = {
  getStores: function(){
    var routesComponent = findRoutesComponent(this);
    if(routesComponent && routesComponent._getStores){
     return routesComponent.getStores(); 
    }
    return null;
};

module.exports = GetStoresMixin;

Routes.js

var Routes = React.createClass({
  mixins: [GetStoresMixin],
  _URLStore: null,
  _RouteStore: null,
  _ActiveStore: null,
  _isRoutesComponent:function(){
    return true;
  },
  _getStores:function(){
    this._URLStore = this._URLStore || new URLStore();
    this._RouteStore = this._RouteStore || new RouteStore();
    this._ActiveStore = this._ActiveStore || new ActiveStore();
    return {
      URLStore: this._URLStore,
      RouteStore: this._RouteStore,
      ActiveStore: this._ActiveStore
    };
  }
});

The gist allows a component to look up the this._owner tree of React to find the <Routes /> instance it is a child of. Then get all the store instances from that <Routes /> instance.

This allows the <Routes /> instance to hold the reference to all the store instances. When the <Routes /> instance is destroyed / out of scope; all the stores and listeners should be freed; pending they aren't leaked elsewhere. If the store instances are kept inside react component instances that are children of the parent <Routes /> instance, it should be fine. (Please someone tell me if this is wrong)