title: React / Redux wait for store to update
body: <p>I have a problem that a react component is rendering before the redux store has any data.</p>
  
  <p>The problem is caused by the React component being rendered to the page before the existing angular app has dispatched the data to the store.
  I cannot alter the order of the rendering or anything like that.</p>
  
  <p>My simple React component is</p>
  
  <pre><code>import React, {Component} from 'react';
  import { connect } from 'react-redux';
  
  import {addBot} from './actions';
  
  class FlowsContainer extends React.Component {
  
    componentDidMount() {
        this.props.initStoreWithBot();
    }
  
    render() {
      // *** at this point I have the store in state prop
      //but editorFlow array is not yet instanced, it's undefined
  
      const tasks = this.props.state.editorFlow[0].flow.tasks
      return (
            &lt;div&gt;      
                Flow editor react component in main container          
            &lt;/div&gt;
        );
    }
  
  }
  
  const mapStateToProps = (state) =&gt; ({
    state : state
  })
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          initStoreWithBot : () =&gt; dispatch(addBot("test 123"))
      };
  };
  
  export default  connect(
    mapStateToProps,
    mapDispatchToProps
  )(FlowsContainer)
  </code></pre>
  
  <p>So how can I hold off the rendering until editorFlow array has elements ?</p>