Device.js

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import Device from 'components/Device';
import * as DeviceActions from 'actions/device';

export default connect(state => ({
  error: state.device.error,
  isConnected: state.device.isConnected,
  isConnecting: state.device.isConnecting
}), dispatch => ({
  connect: bindActionCreators(DeviceActions.connect, dispatch),
  execute: bindActionCreators(DeviceActions.execute, dispatch),
  disconnect: bindActionCreators(DeviceActions.disconnect, dispatch)
}))(Device);

Device.jsx

import React, { Component, PropTypes } from 'react';

export default class Device extends Component {
  static propTypes = {
    error: PropTypes.object,
    execute: PropTypes.func.isRequired,
    connect: PropTypes.func.isRequired,
    children: PropTypes.element.isRequired,
    disconnect: PropTypes.func.isRequired,
    isConnected: PropTypes.bool.isRequired,
    isExecuting: PropTypes.bool.isRequired,
    isConnecting: PropTypes.bool.isRequired
  };
  static childContextTypes = {
    execute: PropTypes.func.isRequired,
    isConnected: PropTypes.bool.isRequired,
    isExecuting: PropTypes.bool.isRequired
  };
  getChildContext() {
    const { isConnecting, isExecuting, execute } = this.props;
    return {
      device: { isConnecting, isExecuting, execute }
    };
  }
  componentDidMount() {
    this.props.connect();
  }
  componentWillUnmount() {
    this.props.disconnect();
  }
  render() {
    const { isConnected, isConnecting } = this.props;
    return (
      <div className="device-layer">
        {isConnecting && <Loading />}
        {isConnected && this.props.children}
      </div>
    )
  }
}