如何在React / Redux应用程序中定位app bootstrap逻辑

Question

加载Web应用程序时，我希望与服务器建立WebSocket连接。

所以这是一个异步引导活动。

在创建WebSocket连接之前，创建一个使用包装组件（app！）的条件呈现来“阻塞”的更高阶组件是不是惯用？

// containers/App/index.js
export default withWebSocketConnection(app)


// components/WebSocketConnection/index.js
function withWebSocketConnection(wrappedComponent) {
  class AppWithWebSocketConnection extends React.Component {
    constructor(props) {
      super(props);
    }

    componentWillMount() {
      // set this.props.isConnecting to be true
      websocket.connect().then(() => {
        // set this.props.isConnecting to be false
      });
    }

    render() {
      return this.props.isConnecting ? <div>Connecting...</div> : <WrappedComponent {...this.props}/>
    }
  }
  return AppWithWebSocketConnection;
}

export default withWebSocketConnection;