Mobx: Clarification for question about intercept array push (#1763)

[inoyakaigor]

I have store the same like in #1763 and everything worked fine until I needed to set up an interceptor for the push event. I read the thread, looked at MST, but I still have a few questions:

1) The hack with direct add interceptor to observable property is a legitimate from point of view of Mobx best practicies/philosophy/etc?
2) If this hack is bad must I to use MST?
3) If I must not to use MST is there right way to intercept the push in observed property?

The store:

 class Model {
        @observable list = [];

        constructor() {
           intercept(this, 'list', (change) => {
              console.log('-> Change');
              return null;
           })
        }
   }

The hack:

this.list.intercept((change) => {
   console.log('-> Change');
   return null;
})

[urugator]

You can either intercept modification of the property (this.list = newArray)

intercept(this, 'list', (change) => {
  return change;  
})

or you can intercept modification of the array (list[index] = item, list.push(item), etc)

intercept(this.list, (change) => {
  return change;      
})

The shape of change event depends on the structure that is being intercepted, see docs.
Both of these are legitimate.

Mobx itself cannot provide deep tree diffs/patches, because it's change detection isn't based on diffing, but on "binding", which requires stable object references.

Personally I recommend to intercept the operation (action) that mutates the array, rather than customizing array/object behavior with these "hooks".

[inoyakaigor]

@urugator thank you! That's exactly what I looking for!

intercept(this.list, (change) => {})

I use interceptors (just to be clear most often observe) for make side effects in one place when change occurs in many places and cant that why I can't intercept operation.

[FredyC]

make side effects in one place when change occurs in many places and cant that why I can't intercept operation.

Why you cannot make that side effect happen right before action changes that list? I also used to do a lot of these reactions all over the place, but it does become a nightmare later when you need to change something and you have to find all places that might get broken by that change. Especially painful without solid tests.

[inoyakaigor]

In my app observe is being used to looking for selected entities in list and then add it in location.search for ability to share link with full state of parameters. I think in common case you are absolutely right, but in my case making side effects in observe is ok.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.