@Fran-Diox Thanks for a good information :smile: I look forward to it.
S
Save
Saving
sk
@sk
0
Reputation
3
Posts
972
Profile views
0
Followers
0
Following
Posts made by sk
-
RE: React extention's Navigator doesn't work well with react-redux ?
-
RE: React extention's Navigator doesn't work well with react-redux ?
I had some progress even though I’m not sure this is a solution or there isn’t any problem…
index.js
<Provider store={store}> <App store={store}/> //<-- *** I changed here. </Provider>, document.getElementById('app')
app.js
tabs() { return React.createClass({ renderTabs: function() { return [ { content: <Page1 navigator={this.props.navigator} store={this.props.store}/>, //<-- *** I changed here. tab: <Ons.Tab label="Page1" icon="ion-ios-home-outline" /> }, { content: <Page2 navigator={this.props.navigator} store={this.props.store}/>, //<-- *** I changed here. tab: <Ons.Tab label="Page2" icon="ion-ios-home-outline" /> } ]; }, render: function() { return ( <Ons.Page> <Ons.Tabbar renderTabs={this.renderTabs} /> </Ons.Page> ); } }); } renderScene(route, navigator) { route.props = route.props || {}; route.props.navigator = navigator; route.props.store= this.props.store; //<-- *** I changed here. return React.createElement(route.comp, route.props); } render() { return( <Ons.Navigator store={this.props.store} initialRoute={{comp: this.tabs()}} renderScene={this.renderScene.bind(this)} //<-- *** I changed here. /> ); }
-
React extention's Navigator doesn't work well with react-redux ?
Thanks for a react extension! I really like it. When I use react extention with react-redux, Navigator doesn’t work. How can I avoid this problem? or I can’t ?
This code is like below.
index.js ==================================== let store = createStore(appReducer); ReactDOM.render( <Provider store={store}> //<---- *** Tab's contents can't see this store?? <App/> </Provider>, document.getElementById('app') ); App.js ======================================= class App extends React.Component { constructor(props) { super(props); } tabs() { return React.createClass({ renderTabs: function() { return [ { content: <Page1 navigator={this.props.navigator} store={this.props.store}/>, tab: <Ons.Tab label="Page1" icon="ion-ios-home-outline" /> }, { content: <Page2 navigator={this.props.navigator} store={this.props.store}/>, tab: <Ons.Tab label="Page2" icon="ion-ios-home-outline" /> } ]; }, render: function() { return ( <Ons.Page> <Ons.Tabbar renderTabs={this.renderTabs} /> </Ons.Page> ); } }); } renderScene(route, navigator) { route.props = route.props || {}; route.props.navigator = navigator; return React.createElement(route.comp, route.props); } render() { return( <Ons.Navigator //<-- *** If I use Page1 directly here instead of Navigator, It'll work. initialRoute={{comp: this.tabs()}} renderScene={this.renderScene} /> ); } } Page1.js ====================================== class Page1 extends React.Component { ... } export default connect(mapStateToProps, mapDispatchToProps)(Page1) //<-- *** Problem occures here. Console ======================================== > bundle.js:1908 Uncaught Invariant Violation: Could not find "store" in either the context or props of "Connect(Page1)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Page1)".
Also I tried to pass Store to App and Page as props, it didn’t work well.
Thanks,