---
layout: page
title: Upgrading from Marty 0.9 to 0.10
id: upgrading
section: Upgrading
---

If you've got any questions about upgrading you can ask the team in [Marty's Gitter chatroom](https://gitter.im/martyjs/marty).

<h2 id="singleton">Singleton to Application</h2>

Firstly, if you're using ES6 you will need to remove all references to ``Marty.register(...)`` and just return the original type.

{% highlight js %}
// Instead of
export default Marty.register(UserStore);

// You just export the type
export default UserStore;

{% endhighlight %}

Next you need to create a new <a href="{% url /guides/application/index.html %}">Application</a> instance and tell it about all of your types. If you're using webpack or browserify this process is significantly easier if you implement <a href="{% url /guides/application/automatic-registration.html %}">automatic registration</a>.

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

module.exports = Application;
es6
===
class Application extends Marty.Application {
    constructor(options) {
        super(options);
        this.register('userStore', require('./stores/userStore'));
        ...
    }
}

export default Application;
{% endsample %}

Next, when calling `React.render` you must wrap the element you are about to render with an `ApplicationContainer`, passing an instance of your application in via the props.

{% highlight js %}
var app = new Application();
var { ApplicationContainer }  = require('marty');

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

Now that we're returning types instead of instances we need to update all references within our application. This largely means that, instead of require'ing your dependency, you must instead call `this.app.{dependencyId}`. e.g.

{% highlight js %}
// Instead of
var UserAPI = require('../sources/userAPI');

class UserActions extends Marty.ActionCreators {
    deleteUser(id) {
        UserAPI.for(this).deleteUser(id);
    }
}

// Assuming you had registered UserAPI with the id 'userAPI'
class UserActions extends Marty.ActionCreators {
    deleteUser(id) {
        this.app.userAPI.deleteUser(id);
    }
}
{% endhighlight %}

This is largely the same from with React components. The only requirement is that the component is either wrapped in a [container]({% url /guides/containers/index.html %}) or is using the [state mixin]({% url /guides/state-mixin/index.html %}). There are times when neither are appropriate so we've introduced the [app mixin]({% url /api/app-mixin/index.html %}) which simply injects `app` into your component.

{% highlight js %}
class User extends React.Component {
    saveUser() {
        this.app.userActionCreators.saveUser(this.props.id);
    }
}

export default Marty.createContainer(User);
{% endhighlight %}

For the `listenTo` property in [containers]({% url /api/containers/index.html#listenTo %}) and [state mixins]({% url /api/state-mixin/index.html#listenTo %}) you need to replace type references with their dependency Id's. The `listenTo` behavior is identical otherwise.

{% highlight js %}
export default Marty.createContainer(User, {
    // instead of
    listenTo: [
        UserStore,
        FriendsStore
    ],

    // Use strings
    listenTo: [
        'userStore',
        'friends.store' // To access app.friends.store
    ],

    fetch {
        user() {
            return this.app.userStore.getUser(123);
        }
    }
});
{% endhighlight %}

To update your tests, we recommend you look at our [test examples](https://github.com/martyjs/marty-test-examples) and [test utils]({% url /api/test-utils/index.html %}).

<h3 id="isomorphism">Isomorphism</h3>

[Contexts](http://martyjs.org/v/0.9.16/api/context/index.html) have been completely removed and most functions that were previously on `Marty`, e.g. [`Marty.replaceState`](http://martyjs.org/v/0.9.16/api/top-level-api/#replaceState), [`Marty.clearState`](http://martyjs.org/v/0.9.16/api/top-level-api/#clearState), [`Marty.dehydrate`](http://martyjs.org/v/0.9.16/api/top-level-api/#dehydrate) and [`Marty.rehydrate`](http://martyjs.org/v/0.9.16/api/top-level-api/#rehydrate)  have been moved to to the [application]({% url /api/application/index.html %}).

{% highlight js %}
// Instead of
var context = Marty.createContext();

Marty.replaceState({ ... }, context);
Marty.clearState(context);
Marty.dehyrdate(context);
Marty.rehydrate({ ... }, context);

// You do
var app = new Application();

app.replaceState({ ... });
app.clearState();
app.dehyrdate();
app.rehydrate({ ... });
{% endhighlight %}

[`Marty.renderToString`](http://martyjs.org/v/0.9.16/api/top-level-api/#renderToString) has also been moved to the application and has simpler signature.

{% highlight js %}
// Instead of
var context = Marty.createContext();
var options = {
  type: Foo,
  timeout: 2000,
  context: context,
  props: { bar: 'baz' }
};

Marty.renderToString(options).then(res => {
  console.log('Rendered html', res.html);
  console.log('Diagnostics', res.diagnostics);
});

// You do
var app = new Application();

app.renderToString(<Foo bar='baz' />, { timeout: 2000 }).then(res => {
  // We've had to split the html body and html state variables out to resolve https://github.com/martyjs/marty/issues/288.
  console.log('Rendered html body', res.htmlBody);
  console.log('Rendered html state', res.htmlState);
  console.log('Diagnostics', res.diagnostics);
});
{% endhighlight %}

<h2 id="parseJSON">parseJSON</h2>

The HttpStateSource internally uses [`fetch`](https://fetch.spec.whatwg.org/) to make HTTP calls for you. If the response contains JSON you need to [call `res.json()`](https://github.com/github/fetch#json) to get the actual JSON. We thought we'd be helpful and do this for you automatically, assigning the JSON to `res.body`. Unfortunately we did this before we knew `fetch` was also going to use the `body` property for other purposes which has [caused issues](https://github.com/martyjs/marty/issues/268). We therefore need to depreciate this feature. For v0.10 you will get warnings and in v0.11 we will turn feature off by default.

To get rid of the warnings you first need to remove the HTTP hook

{% highlight js %}
require('marty').HttpStateSource.removeHook('parseJSON');
{% endhighlight %}

Next you will need to update all references to `res.body`. We recommend putting all of this logic in your HTTP state source

{% highlight js %}
class UserAPI extends Marty.HttpStateSource {
    getUser(id) {
        return this.get(`/users/${id}`).then(res => {
            if (res.ok) {
                return res.json();
            }

            throw new Error('Failed to get user');
        });
    }
}
{% endhighlight %}

<h2 id="state-mixin">State mixin's</h2>

We warned when we released v0.9 we would be depreciating the state mixin. We've decided to keep them around for v0.10 however we've removed the ability to [create a state mixin by passing in a store](http://martyjs.org/v/0.9.16/api/state-mixin/index.html#stores) or [by passing in an object hash of stores](http://martyjs.org/v/0.9.16/api/state-mixin/index.html#stores).

{% highlight js %}
// No longer possible
Marty.createStateMixin(UserStore)
Marty.createStateMixin({
    users: UserStore,
    friends: FriendsStore
});
{% endhighlight %}

<h2 id="rollbacks">Rollbacks</h2>

[Rollbacks](http://martyjs.org/v/0.9.16/api/stores/index.html#rollback) are no longer supported. We recommend you look at our [suggested approach to handling errors]({% url /guides/action-creators/handling-errors.html %}).

<h2 id="other">Other Depreciations</h2>

* You no longer need to declare Id's or displayName's on the type. An instances Id will be populated from from `Application#register(id, type)`.
* `Marty.registry` no longer exists. If you want to get all instances of a given type you can call [`Application#getAll(type)`]({% url /api/application/index.html#getAll %})
- `require('marty').Dispatcher` is no longer supported. Create an application and access the [dispatcher](http://martyjs.org/api/application/index.html#dispatcher).
- `require('marty/http/hooks')` is no longer supported. Use `require('marty').hooks` instead
- `require('marty/environment')` is no longer supported. Use `require('marty').environment`
- `require('marty/fetch')` is no longer supported. Use `require('marty').fetch`
- `require('marty/when')` is no longer supported. Use `require('marty').when`
- `require('marty/autoDispatch')` is no longer supported. Use `require('marty').autoDispatch`
- `require('marty').Diagnostics` is no longer supported. Use `require('marty').diagnostics`