title: Global popup in React with Router and Redux
body: <p>I implemented a well working view layer in React JS where everything still operates on dummy data.</p>
  
  <p>Now I need a modal popup that can be triggered from a lot of different components. According to <a href="https://stackoverflow.com/questions/23405669/react-modal-with-multiple-link-triggers">this thread</a> this could be nicely implemented with Redux, so I tried that.</p>
  
  <p>After having to change my Router and reading countless docs I came up with</p>
  
  <pre><code>const Root = ({store}) =&gt; (
      &lt;Provider store={store}&gt;
          &lt;Router history={browserHistory}&gt;
              &lt;Route path="/" component={...}/&gt;
  
              &lt;Popup visible={store.getState().taskEditPopup.open}&gt;
                  &lt;...&gt;
              &lt;/Popup&gt;
          &lt;/Router&gt;
      &lt;/Provider&gt;
  )
  
  
  ReactDOM.render(
      &lt;Root store={store}/&gt;,
      document.getElementById('react')
  )
  </code></pre>
  
  <p>When the <code>Popup</code> is a child of <code>Provider</code>, it gives an error and as a child of Router it does not appear in the DOM.</p>
  
  <p>So where to put this global modal? Is there a standard way to solve this? </p>