Mobx: observe does not fire change on object with nested array

[gregor-mueller]

Hey there, I have an:

[✓] Issue:

• [✓] Provide a minimal sample reproduction.
• [✓] Did you check this issue wasn't filed before?
• [✓] Elaborate on your issue. What behavior did you expect?
• [✓] State the versions of MobX and relevant libraries. Which browser / node / ... version?

So I got an object that has an array as one of its props. When I change the array (push, remove, replace), the change handler is not called (callback of observe(myObject, callback).
If I reassign the array, the callback is fired.
myObject.arrayProp = [...myObject.arrayProp, newItem]
push via reassign

This is counter-intuitive as for an observable array (not nested inside of an object) it works the other way around.. If I do any modification, except reassigning it, the change will fire. I guess reassigning it breaks the ref, so this behaves as expected.

I read in the documentation, that observe() only works on plain objects (so it won't on arrays) but the behavior I observed does not align to this statement.

My environment:

• Chrome 64/Firefox 58
• Node.js 8.9.1
• MobX 3.4.1
• React 16.2.0
• Webpack 3.10.0

Sample project:
https://codesandbox.io/s/0qvpylv6op

If you need any other information or may know another way to make this work (I need to react to changes to the array inside the object), just tell me!

Some other note (might be worth investigating):
What is weird as well is that when I ran the project with webpack-dev-server, it worked the way I wanted. If I package it and open the html, the callbacks are not fired anymore. But this could be something with the configuration (even though I tried to eliminate as many reasons for that as possible).

[urugator]

observe is not an idiomatic way to "observe/consume" observables in Mobx.
It observes only the passed item itself and it ignores transactions. It's a low level tool and it's rarely needed.
Basically Mobx doesn't support "explicit" subscriptions, it figures what should (not) be observed itself, based on which observables are (not) accessed in "tracking functions" - computed/reaction/autorun/render - use these functions instead.
There is a bit of an explanation
EDIT: please close the issue when satisfied

[gregor-mueller]

Thanks for the response! I'll have a look into it and close the issue/comment here, afterwards.