Reaction is not getting fired correctly

[smriti-chawla]

  matchEventTitles = reaction(
    () => this.activeImpact.events.map(event => event),
    (eventDetails): void => {
          console.log('doing some function work here', eventDetails)
    },
  );

activeImpact is an observable like below

@observable activeImpact: Impact = {
    events: [],
  };

the reaction is getting fired whenever there is a change in the length of this.activeImpact.events.
However, I want to fire this whenever there is any change in this.activeImpact.events whether it's a specific property to it.
for eg if I do something like

matchEventTitles = reaction(
  () => this.activeImpact.events.map(event => ({
      id: event.id,
      name: event.name,
    })),
  (eventDetails): void => {
    console.log('doing some function work here', eventDetails)
    
  },
);

then in that case the reaction is working for change in property id and name .

however, there are so many properties in this I cannot write then like this to observe the change

[danielkcz]

Try autorun instead.

[smriti-chawla]

autorun is just getting fired once when the page loads.

Why is it not working with reaction? since () => this.activeImpact.events.map(event => event), this would any change in the array of object I believe

[danielkcz]

Best if you can setup reproduction with eg. CodeSandbox.

[mweststrate]

See https://mobx.js.org/understanding-reactivity.html, mobx only tracks what you are actually reading; in your example you are reading the keys and values of the map, but not any attributes of the events itself, so those won't be tracked.

…

On Mon, Oct 26, 2020 at 6:09 PM Daniel K. ***@***.***> wrote: Best if you can setup reproduction with eg. CodeSandbox. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2561 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBHVEOZR3Z4Z6N4QPKLSMW3N5ANCNFSM4S7QPK6Q> .

[danielkcz]

I still seem to have a problem grasping these basic as well 😅

[smriti-chawla]

 matchEventTitles = reaction(
    () => this.activeImpact.events.map(event =>{ return {...event}}),
    (eventDetails): void => {
          console.log('doing some function work here', eventDetails)
    },
  );

this is working for it. Added restructuring so every time a new instance is returned

[danielkcz]

@smriti-chawla I believe you could also do mobx.toJS(this.activeImpact.events) with the same effect unless you want to do some modifications in that map.

[smriti-chawla]

@FredyC correct. Thank you