0

I have an external library with TypeScript class instances in observed variable of my app's store:

class Store:
    @observable active_obj:ExternalClass;

This instance has a method which, when called, updates its internal state leaving the object as is:

store.active_obj.change()

Now, since Mobx is not observing this object itself nor its (I assume) properties, only changes happening directly on the field active_obj (like new value assigned to it). Since instances of MyClass are provided by external library and ultimately get rendered inside this library's components I can't add observables and observers to its class structure nor React components. Mind you, this is only what I think is the reason that changing the object's properties doesn't trigger re-render...

I had to cheat a bit by using other, observed variable I change directly with nonsense data at the same time I'm calling to unobserved instance for change. Adding references to this variable on components higher up the tree, I can trigger re-render that produces updates on the (unobserving) components of the external library.

My question is, how best to make Mobx aware of change so it can notify observers of store.active_obj instance?

I think this part of Mobx documentation warns about this, but there's no workarounds or solutions for it:

** If likes where objects instead of strings, and if they were rendered by their own Like component, the Likes component would not rerender for changes happening inside a specific like.

from here, at end of the page

Edit

As per @mweststrate's question, I provide some context:

  • My app controls its data, but it has to create external class' instances from that
  • Instance's data is encapsulated and mutated in place, but it's done by asking from my app's side through user triggered events (meaning, I know when data is updated)
  • Basically class uses app's data to provide different views into data based on user selection and renders it with its React components
  • I also use this changed data elsewhere in the app in components I control
  • Changed data is part of external class' internals and I can't depend on it
  • Since Mobx tracks mutations it can see, using Observable doesn't directly work

Some possible solutions I thought:

  • manually notify observers that observable active_object has changed when I have called the instance it references to change
  • have a container object that Mobx can track and when I change its sentinel property, that update is noticed and actual instance with it
jarpineh
  • 79
  • 1
  • 2
  • 9
  • I am not sure whether MobX can do much for you if neither the data nor the components that render the data are under your control. But if you can provide a real example of what you are trying to achieve, there are some possibility, like making individual fields inside an existing object observable by using `extendObservable`. But it might be a tricky road. – mweststrate Jan 04 '17 at 19:29
  • Um.. This case really is my problem. The actual code is somewhat more complex, but it boils down to this. I'll edit the answer to provide some context and few ideas I've had. – jarpineh Jan 05 '17 at 09:53
  • Also, there's other parts to the app like controlling user selection and showing same data through other React components, which all rely on Mobx. It's just this one bit that's a problem because of the visibility of changed data. – jarpineh Jan 05 '17 at 10:08

0 Answers0