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

[sk]

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,

[sk]

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

[Fran Diox]

I think we will publish a post about Redux next week. I don’t know if it uses navigator, though :sweat_smile:
Let’s see if @patrick knows more about this issue.

[sk]

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

[patrick]

@sk sry to keep you waiting, your solutions seems to be fine. My blogpost will be only about redux with vanilla js. If you encounter any problems, feel free to report it on github or ask a question in our community.