Higher-order Hoverboard Store Component

store-component.js

import React from 'react';

export default Store => ComposedComponent => React.createClass({

    getInitialState() {
        return Store.getState();
    },

    componentDidMount() {
        this.unsubscribe = Store.getState(state => this.setState(state));
    },

    componentWillUnmount() {
        this.unsubscribe();
    },

    render() {
        return <ComposedComponent {...this.props} {...this.state} />;
    }

});

usage.js

import StoreComponent from './store-component.js'
import Hoverboard from 'hoverboard'

const MyDataStore = Hoverboard({
    getInitialState() {
        setTimeout(() => this.setState({ myData: 123 }), 1000);
        return { myData: 0 };
    }
});

const MyDataStoreWrapper = StoreComponent(MyDataStore)

const ViewComponent = React.createClass({
    render() {
        return <div>{this.props.myLabel}: {this.props.myData}</div>
    }
});

...
render() {
  const DataViewComponent = MyDataStoreWrapper(ViewComponent)
  return <DataViewComponent myLabel="something"/>;
}