reusable-connect.js

export const reusableConnect = (_localMapStateToProps, _localActions, globalActions = DEFAULT_MAP) => Component => {
  const localMapStateToProps = _localMapStateToProps || defaultMapStateToProps
  const localActions = _localActions || {}

  const _mapStateToProps = getInstanceState => (state, props) => {
    const localState = getInstanceState(state)
    const retVal     = localMapStateToProps(localState, state, props)
    if (typeof(retVal) === "function") {
      return localMapStateToProps(getInstanceState)
    } else {
      return retVal
    }
  }

  return React.createClass({
    displayName: `Reusable Connect(${Component.displayName || Component.name})`,

    getInitialState() {
      return {
        Component: null
      }
    },

    contextTypes: {
      _reusable: ReusableShape
    },

    componentWillMount() {
      const {namespace, passedProps, getInstanceState, componentName} = this.context._reusable
      const _localActions = bindLocalActions(localActions, namespace, componentName, passedProps)
      const actions = merge(_localActions, globalActions)
      const Connected = connect(_mapStateToProps(getInstanceState), actions)(Component)
      this.setState({Component: Connected})
    },

    render() {
      const {Component} = this.state
      return Component ? <Component {...this.props} /> : <div></div>
    }
  })
}