martyjs / marty

A Javascript library for state management in React applications
http://martyjs.org
MIT License
1.09k stars 77 forks source link

How do I pass in app context when using react-router? #359

Closed krashidov closed 8 years ago

krashidov commented 8 years ago

Hello, I'm using react-router and martyjs. My problem is that in my containers, this.app is undefined.

class Application extends Marty.Application {
    constructor(options) {
        super(options);
        this.register('clientStore', require('../stores/ClientStore'));
    }
}

var app = new Application();
var ApplicationContainer = require('marty').ApplicationContainer;

class App extends React.Component{
  render() {
    return (
      <ApplicationContainer app={app}>
        <div className="container">
          <TopNavbar/>
          { }
          <RouteHandler/>
        </div>
      </ApplicationContainer>
    );
  }
};

var routes = (
  <Route handler={App}>
    <Route name="dashboard" path="/dashboard" handler={Dashboard}/>
    <Route name="view" path="/view" handler={View}/>
    <Route name="clients" path="/clients" handler={ClientListView}/>
    <Route name="client" path="/clients/:clientId" handler={ClientEditContainer}/>
  </Route>
);

 //somewhere else, we actually render
  Router.run(routes, Router.HistoryLocation, function (Handler, state) {
      React.render(<Handler {...state}/>, document.getElementById('home'));     
  });

Basically, I got the warning that my "parent-based and owner-based contexts differ" Is this possible to fix currently or do I need to use marty-express ?

Thanks!

Rodeoclash commented 8 years ago

I don't have a fix but I will mention that I have seen some weirdness with that warning message recently. I can't really remember what I did to make it go away but when it did, I had access to the the app context in my containers again (and everywhere I wanted it via Marty.injectApp).

Maybe someone else might be able to shed some light on why that warnings coming up as you should be able to access the app in the context from the container.

taion commented 8 years ago

This would be resolved by React v0.14's use of parent contexts everywhere. For now, I'd use your ApplicationContainer as a top-level nested route outside of everything else, e.g. put a higher-level Route above the one for TopNavbar.