0

I get:

Error: [mobx-state-tree] expected a mobx-state-tree type as first argument, got class HubConnection { constructor(urlOrConnection, options = {}) { options = options || {};

When trying to do this:

import { HubConnection } from '@aspnet/signalr-client';
.model('MyStore', {
  connection: types.optional(HubConnection, new HubConnection('http://localhost:5000/myhub')),
})

I could declare it in the constructor of my React component instead as I used to

constructor(props){
  super(props);
  this.connection = new HubConnection('http://localhost:5000/myhub');
}

but then all attached eventhandlers also needs to be defined in the component

componentDidMount(){
  this.connection.on('Someaction', async(res: any) => {});
}

and starting / closing of the connection 

handleBtnClicked = () => {
  this.connection.start().then(() => self.connection.invoke('Someotheraction'));
}

and ideally I think this belongs in the model and model actions, so the react component is only triggering actions on the model and nothing more.

Is there a way to store other than mobx-state-tree types in mobx-state-tree models, can you somehow wrap it in a mobx type or is this actually not something that belongs in mobx and therefore intentionally.

Soren
  • 227
  • 1
  • 2
  • 10

1 Answers1

5

It is intentional that mobx-state-tree models can only define properties of MST based types. This is because those types are snapshottable, serializable, patchable etc. While something like a HubConnection is not a thing that could be snapshotted, rehydrated etc.

It is possible to store arbitrarily things in a MST tree, but just not as props. Instead, you could use volatile state

mweststrate
  • 4,547
  • 1
  • 14
  • 22