Registering one store shows up in remotedev, another store doesn't

[jefffriesen]

Registering one store with remotedev works great:

import remotedev from 'mobx-remotedev/lib/dev'

class Store {

  constructor() {
    autorun(() => this.addAccountFB())
  }

  @observable currentAccountId = ''

  @action addAccount(vals: Object): void {
    const accountKey = this.refs.accounts.push().key
    this.refs.base.update({
      [`/accounts/${accountKey}`]: vals,
      [`/currentAccount`]: accountKey
    })
  }  
}

let store = new Store()
export default remotedev(store)

When I create another store and pass it into remotedev, it doesn't show up in remotedev UI:

import remotedev from 'mobx-remotedev/lib/dev'

class FormStore {
  @observable accountCreated = false

  @action disableAccountCreationForm(): void {
    this.accountCreated = true
  }
}

let formStore = new FormStore()
export default remotedev(formStore)

Ideally I would like to be able to view the state of these two stores. But I think this is an even a more basic problem. When I unregister the first store (by not passing in the store instance to remotedev), no store shows up as an option in the remotedev UI. In other words, I can't get that second store showing up in the remotedev UI and the remotedev chrome extension doesn't light up green.

I've restarted webpack, restarted the browser and I still can't get that second store to show up. Part of me thinks this is something silly I'm overlooking. But these two stores seem to be set up the same but one works in remotedev and one doesn't. Is there possible there is a config issue?

Thanks

[zalmoxisus]

Multiple stores are supported, you can check todomvc example, where we have ViewStore and TodoStore.

The problem is that you should wrap into remoredev the class not the instance. So instead of:

let formStore = new FormStore()
export default remotedev(formStore)

it should be

let formStore = new remotedev(FormStore)()
export default formStore

To make it simpler you could use the decorator:

import remotedev from 'mobx-remotedev/lib/dev'

@remotedev
class FormStore {
  @observable accountCreated = false

  @action disableAccountCreationForm(): void {
    this.accountCreated = true
  }
}

let formStore = new FormStore()
export default formStore

[jefffriesen]

That worked, thank you.