App.jsx

import React from 'react';
import PropTypes from 'prop-types';

class App extends React.Component {
  render() {
    const { menu } = this.context;
    return menu === '????'
      ? <h1>???</h1>
      : <h1>xxx</h1>;
  }

  static contextProps = {
    menu: PropTypes.object,
    setMenu: PropTypes.func,
  }
}

StoreProvider.jsx

import React from 'react';
import PropTypes from 'prop-types';

import { initStore } from '../lib/fetchData';

export default class StoreProvider extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      menu: 'orders',
      modal: null,
      store: null,
      isInitializing: true,
    };

    [
      'hideModal',
      'setMenu',
      'showModal',
    ].forEach(v =>
      this[v] = this[v].bind(this)
    );
  }

  componentDidMount() {
    this.initStore();
  }

  async initStore() {
    this.setState({
      store: await initStore(),
      isInitializing: false,
    });
  }

  hideModal() {
    this.setState({
      modal: null,
    });
  }

  showModal(modalInstance) {
    this.setState({
      modal: modalInstance,
    });
  }

  setMenu(menu) {
    this.setState({ menu });
  }

  render() {
    return this.props.children;
  }

  getChildContext() {
    return {
      hideModal: this.hideModal,
      isInitializing: this.state.isInitializing,
      menu: this.state.menu,
      modal: this.state.modal,
      setMenu: this.setMenu,
      showModal: this.showModal,
      store: this.state.store,
    };
  }

  static childContextTypes = {
    hideModal: PropTypes.func,
    isInitializing: PropTypes.bool,
    menu: PropTypes.string,
    modal: PropTypes.object,
    setMenu: PropTypes.func,
    showModal: PropTypes.func,
    store: PropTypes.object,
  };
}