State Mixin API

listenTo

Expects either a store or an array of stores. Just before the initial render, it will register a change listener with the specified store(s).

When the element is about to be unmounted from the DOM it will dispose of an change listeners.

var UserState = Marty.createStateMixin({
  listenTo: [UserStore, FooStore]
});

getState

The result of getState will be set as the state of the bound component. getState will be called when

var UserState = Marty.createStateMixin({
  getState: function () {
    return {
      user: UserStore.getUser(this.props.id)
    }
  }
});

Stores

If the value of a key is a store, then the mixin will automatically listen to the store and merge the stores state with result of getState

var UserState = Marty.createStateMixin({
  foos: FooStore,
  getState: function () {
    return {
      user: UserStore.getUser(this.props.id)
    }
  }
});

// UserState.getState() =>
{
  foos: [...],
  user: { name: ...}
}

getState is optional and so you could just pass in a set of stores and it will automatically listen to them and build the state

var FooBarState = Marty.createStateMixin({
  foos: FooStore,
  bars: BarStore
});

// FooBarState.getState() =>
{
  foos: [...],
  bars: [...]
}

Marty.createStateMixin(Store)

If you are only interested in the state of a single store then you can pass a store directly to createStateMixin which will automatically listen to the store and getState will return the state of the store.

var UserState = Marty.createStateMixin(UserStore);

// UserState.getState() =>
[{name: 'foo'}, ...]