AltManagerContainer.js

gistfile1.js

var React = require('react');

module.exports = React.createClass({

  displayName: 'AltManagerContainer',

  propTypes: {
    Action: React.PropTypes.function.isRequired,
    Store: React.PropTypes.function.isRequired,
    alt: React.PropTypes.object.isRequired,
  },

  componentWillMount: function() {
    // we need to init the store and actions during creation
    this.initProps(this.props)
  },

  componentWillReceiveProps: function(newProps) {
    // unlisten from old alt store if change of alt
    if (this.props.alt !== newProps.alt) {
      this.store.unlisten(this.listenState)
      // init the new props
      this.initProps(newProps)
    }
  },

  listenState: function(data) {
    this.forceUpdate();
  },

  initProps: function(props) {
    var Store = this.props.Store
    var Action = this.props.Action
    if (!Store) {
      throw new ReferenceError('props.Store has not been defined')
    }

    if (!Action) {
      throw new ReferenceError('props.Action has not been is defined')
    }

    var actionName = Action.name
    if (!props.alt.getActions(actionName)) {
      props.alt.addActions(actionName, Action)
      props.alt.createStore(Store)
    }

    this.store.listen(this.listenState)
    this.forceUpdate();
  },

  componentWillUnmount: function() {
    this.store.unlisten(this.listenState)
  }

  render: function() {
    return this.props.children;
  },
});