CODEWITHSUNDEEP
mobxmobx-state-tree
Soren
Soren

Reputation: 317

How do you store a non mobx-state-tree type (Class instance) in models?

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.

Upvotes: 0

Views: 1709

Answers (1)

mweststrate
mweststrate

Reputation: 4978

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

Upvotes: 6

Related Questions