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

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.
      />
    );
  }

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,