Reacting to changes within observed object's unobserved properties

977 views Asked by At

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
0

There are 0 answers