Application

The Application is responsible for knowing about and instantiating all Stores, Action Creators, Queries, and State sources within your application. It also plays a central role in building isomorphic applications.

// application.js
var Application = Marty.createApplication(function () {
    this.register('userStore', require('./stores/userStore'));
});

// views/user.js
...

module.exports = Marty.createContainer(User, {
    listenTo: 'userStore',
    fetch: {
        user: function () {
            return this.app.userStore.getUser();
        }
    }
});

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

React.render((
    <ApplicationContainer app={app}>
        <User id={123} />
    </ApplicationContainer>
), document.body);
// application.js
class Application extends Marty.Application {
    constructor(options) {
        super(options);

        this.register('userStore', require('./stores/userStore'));
    }
}

// views/user.js
...

module.exports = Marty.createContainer(User, {
    listenTo: 'userStore',
    fetch: {
        user() {
            return this.app.userStore.getUser();
        }
    }
});

// main.js
var app = new Application();
var { ApplicationContainer }  = require('marty');

React.render((
    <ApplicationContainer app={app}>
        <User id={123} />
    </ApplicationContainer>
), document.body);

You use register to tell the application about all the different types in your application. The two things you must specify are an Id (string) and a type (e.g. a Store or an ActionCreator). Internally register will create an instance of that type, passing the application instance into the constructor and then making it accessible on the application object.

You can also pass in an object literal to register, allowing you to register multiple types at once as well. If the object values are themselves objects then their Id's will be the path to the leaf node joined by .'s.

Having to remember to register types when you create them can become a bit of a chore. If you're using webpack or browserify you can automate the registration process!

var Application =  Marty.createApplication(function () {
    this.register({
        foo: {
            bar: {
                baz: BazStore
            }
        }
    });
});

var app = new Application();

console.log(app.foo.bar.baz.id, 'foo.bar.baz');
class Application extends Marty.Application {
    constructor(options) {
        super(options);

        this.register({
            foo: {
                bar: {
                    baz: BazStore
                }
            }
        });
    }
}

var app = new Application();

console.log(app.foo.bar.baz.id, 'foo.bar.baz');

Once you have an instance of an application you need to make accessible to your components. To do this you wrap your root component in an ApplicationContainer which you must pass the application instance to via the app prop. The ApplicationContainer will make the available to any children via contexts).

You can access the application instance by calling this.app in Stores, Action Creators, Queries, and State sources. This is also true for components as long as its wrapped in a container or you're using the state mixin/app mixin.

//views/user.js
var User = React.createClass({
    saveUser: function () {
        this.app.userActions.saveUser({
            id: this.props.user.id
        });
    }
})

module.exports = Marty.createContainer(User);

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

React.render((
    <ApplicationContainer app={app}>
        <User />
    </ApplicationContainer>
), document.body);
//views/user.js
class User extends React.Component {
    saveUser() {
        this.app.userActions.saveUser({
            id: this.props.user.id
        });
    }
}

module.exports = Marty.createContainer(User);

//main.js
var app = new Application();
var { ApplicationContainer }  = require('marty');

React.render((
    <ApplicationContainer app={app}>
        <User />
    </ApplicationContainer>
), document.body);