How to connect state to props with mobx.js @observer when use ES6 class?

Viewed 17466

Let's take a class like this in an app with React and React Router.

@observer class Module1 extends React.Component {

  constructor (props) {
    super(props);
    //...
  }

  componentWillMount(){
    //...
  }

  method(){
    //...
  }

  otherMethod(){
    //...
  }

  render() {
    return (
       <ChildComp bars={this.props.bars}/>}
    );
  }
}

And let's take a state like this

state = observable({
  module1:{
    bars:{
      //...
    }
  },
  module2:{
    foos:{
      //...
    }
  }
})

The Module1 component is loaded like this:

//index.js
render(
      <Router history={browserHistory}>
        <Route path="/" component={App}>
          <Route path='/map' component={Module1} >
            <Route path="/entity/:id" component={SubModule}/>
          </Route>
          <Route path='/map' component={Module2} >
        </Route>
      </Router>,
      document.getElementById('render-target')
    );

How could I pass the props module1.bars to Module1 component? In redux I would use <provider>and redux-connect but I am a bit lost with this in Mobx.js.

4 Answers
Related