राउटर और रेडक्स के साथ प्रतिक्रिया में वैश्विक पॉपअप - प्रतिक्रिया, प्रतिक्रिया-राउटर, प्रतिक्रिया-रेडक्स

मैंने रिएक्ट जेएस में एक अच्छी तरह से काम करने वाली दृश्य परत को लागू किया जहां सब कुछ अभी भी डमी डेटा पर संचालित होता है।

अब मुझे एक मोडल पॉपअप की आवश्यकता है जिसे बहुत सारे अलग-अलग घटकों से ट्रिगर किया जा सके। इसके अनुसार यह धागा यह Redux के साथ अच्छी तरह से लागू किया जा सकता है, इसलिए मैंने कोशिश की।

मेरे राउटर को बदलने और अनगिनत डॉक्स पढ़ने के बाद मैं साथ आया

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")
)

जब Popup का बच्चा है Provider, यह एक त्रुटि देता है और राउटर के एक बच्चे के रूप में यह डोम में प्रकट नहीं होता है।

तो इस वैश्विक मोडल को कहां रखा जाए? क्या इसे हल करने का कोई मानक तरीका है?

उत्तर:

ऐसा लगता है कि यह एक शीर्ष स्तर के घटक का उपयोग करने के लिए काफी सामान्य है (App) हेडर / फूटर्स, ग्लोबल पॉपअप, आदि जैसी चीजों को घोंसला बनाने के लिए आप अपने बाकी मार्गों को अंदर से घोंसला बना सकते हैं App.

उदाहरण उदाहरण:

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

फिर भीतर App.js:

import MyPopup from "../Popup/Popup";

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

export default App;

और फिर आप कर सकते हैं जुडिये MyPopup और इसे पास करो props Redux से।