Navigation

    Monaca & Onsen UI
    • Register
    • Login
    • Search
    • Tags
    • Users
    • Blog
    • Playground
    1. Home
    2. sk
    S
    • Flag Profile
    • Profile
    • Following
    • Followers
    • Blocks
    • Topics
    • Posts
    • Best
    • Groups
    Save
    Saving

    sk

    @sk

    0
    Reputation
    3
    Posts
    972
    Profile views
    0
    Followers
    0
    Following
    Joined Last Online

    sk Follow

    Posts made by sk

    • RE: React extention's Navigator doesn't work well with react-redux ?

      @Fran-Diox Thanks for a good information :smile: I look forward to it.

      posted in Onsen UI
      S
      sk
    • 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.
            />
          );
        }
      
      posted in Onsen UI
      S
      sk
    • 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,

      posted in Onsen UI
      S
      sk