src/main/javascript/common/FluxIt.js
/**
 * An ES7 Decorator for initializing a React Component with the Flux architecture
 * so that any changes to a store will try send changes to this component and
 * optional api calls are called in the component will mount.
 *
 * @param stateFunc a function used to generate the state of the component
 * @param Stores a list or a single Store to bind to the component
 * @param apiFuncs an optional single or list of API calls to call in the componentWillMount
 */
An ES7 Decorator for initializing a React Component with the Flux architecture
so that any changes to a store will try send changes to this component and
optional api calls are called in the component will mount.

@param stateFunc a function used to generate the state of the component
@param Stores a list or a single Store to bind to the component
@param apiFuncs an optional single or list of API calls to call in the componentWillMount
An ES7 Decorator for initializing a React Component with the Flux architecture so that any changes to a store will try send changes to this component and optional api calls are called in the component will mount . @param stateFunc a function used to generate the state of the component @param Stores a list or a single Store to bind to the component @param apiFuncs an optional single or list of API calls to call in the componentWillMount
function init(stateFunc, Stores, apiFuncs) {
  return Component => {
    if(!Stores) {
      throw new Error(`Attempted to flux a component without any stores. See the component ${Component}`);
    }
    if(!(Stores instanceof Array)) {
      Stores = [Stores];
    }
    class FluxIt extends Component {
      constructor(props) {
        super(props);
        this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = stateFunc(props);
      }
      componentWillMount() {
        if(!apiFuncs) {
          return;
        }
        if(!(apiFuncs instanceof Array)) {
          apiFuncs = [apiFuncs];
        }
        apiFuncs.forEach(f => {
          f(Object.assign({}, this.props, this.state));
        });
      }
      componentDidMount() {
        Stores.forEach(store => {
          if(store instanceof Function) {
            store(this.props).addChangeListener(this._handleStoresChanged);
          } else {
            store.addChangeListener(this._handleStoresChanged);
          }
        });
      }
      componentWillUnmount() {
        Stores.forEach(store => {
          if(store instanceof Function) {
            store(this.props).removeChangeListener(this._handleStoresChanged);
          } else {
            store.removeChangeListener(this._handleStoresChanged);
          }
        });
      }
      render() {
        return <Component {...this.props} {...this.state} />;
      }
      _handleStoresChanged = () => {
        if(_isMounted(this)) {
          this.setState(stateFunc(this.props));
        }
      }
    }
    return FluxIt;
  };
}
function init ( stateFunc , Stores , apiFuncs ) { return Component => { if ( ! Stores ) { throw new Error ( ` ${ Component } ` ) ; } if ( ! ( Stores instanceof Array ) ) { Stores = [ Stores ] ; } class FluxIt extends Component { constructor ( props ) { super ( props ) ; this . shouldComponentUpdate = PureRenderMixin . shouldComponentUpdate . bind ( this ) ; this . state = stateFunc ( props ) ; } componentWillMount ( ) { if ( ! apiFuncs ) { return ; } if ( ! ( apiFuncs instanceof Array ) ) { apiFuncs = [ apiFuncs ] ; } apiFuncs . forEach ( f => { f ( Object . assign ( { } , this . props , this . state ) ) ; } ) ; } componentDidMount ( ) { Stores . forEach ( store => { if ( store instanceof Function ) { store ( this . props ) . addChangeListener ( this . _handleStoresChanged ) ; } else { store . addChangeListener ( this . _handleStoresChanged ) ; } } ) ; } componentWillUnmount ( ) { Stores . forEach ( store => { if ( store instanceof Function ) { store ( this . props ) . removeChangeListener ( this . _handleStoresChanged ) ; } else { store . removeChangeListener ( this . _handleStoresChanged ) ; } } ) ; } render ( ) { return < Component { ... this . props } { ... this . state } / > ; } _handleStoresChanged = ( ) => { if ( _isMounted ( this ) ) { this . setState ( stateFunc ( this . props ) ) ; } } } return FluxIt ; } ; }
An ES7 Decorator for initializing a React Component with the Flux architecture
 so that any changes to a store will try send changes to this component and
 optional api calls are called in the component will mount.
An ES7 Decorator for initializing a React Component with the Flux architecture so that any changes to a store will try send changes to this component and optional api calls are called in the component will mount .