Globale Popup in Reagieren mit Router und Redux

Question

Ich implementiert eine gut funktionierende View-Schicht in React JS wo alles noch auf Dummy-Daten funktioniert.

Jetzt brauche ich ein modales Popup, das von vielen verschiedenen Komponenten ausgelöst werden kann. Laut this thread könnte dies mit Redux gut implementiert werden, also habe ich das versucht.

Nach meinem Router und das Lesen unzählige Dokumente zu ändern, die ich mit

const Root = ({store}) => (
    <Provider store={store}> 
     <Router history={browserHistory}> 
      <Route path="/" component={...}/> 

      <Popup visible={store.getState().taskEditPopup.open}> 
       <...> 
      </Popup> 
     </Router> 
    </Provider> 
) 


ReactDOM.render(
    <Root store={store}/>, 
    document.getElementById('react') 
) 

kam Wenn die Popup ist ein Kind der Provider, gibt es einen Fehler, und als Kind Router es in dem nicht angezeigt DOM.

Wohin also mit diesem globalen Modal? Gibt es einen Standardweg, um das zu lösen?

Answer 1

Es ist ziemlich üblich, eine Top-Level-Komponente (App) zu verwenden, um Dinge wie Kopf-/Fußzeilen, globale Popups usw. zu verschachteln. Sie können dann den Rest Ihrer Routen innerhalb App verschachteln.

Routen Beispiel:

const routes = (
    <Router history={browserHistory}> 
    <Route path="/" component={App} > 
     <IndexRedirect to="login" /> 
     <Route path="login" component={Login} /> 
     <Route path="/home" component={Home} /> 
    </Route> 
    </Router>); 

Dann innerhalb App.js:

import MyPopup from '../Popup/Popup'; 

const App = ({ children }) => 
    (<div className="App"> 
    <MyPopup /> 
    { children } 
    </div>); 

export default App; 

Und dann können Sie connectMyPopup und es props von redux passieren.