Reaction not firing - what am I missing?

[scottwillman]

This reaction isn't firing and I don't have a deep enough understanding yet as to why. Can someone spot my mistake?

import { autorun, reaction, makeAutoObservable } from "mobx";

class MyStore {
  cache = new Map();

  constructor() {
    makeAutoObservable(this);

    // this logs
    autorun(() => {
      console.log(this.cache.toJSON());
    });

    // this does not
    reaction(
      () => this.cache,
      (value, prevValue) => {
        console.log(prevValue);
        console.log(value);
      }
    );
  }

  addToCache(key, value) {
    this.cache.set(key, value);
  }
}

const store = new MyStore();
store.addToCache("foo", "bar");
store.addToCache("sing", "song");

https://codesandbox.io/s/cranky-mahavira-63ttc?file=/src/App.js

[scottwillman]

It looks like I needed to access something specific about the Map, not just the root map itself. This works:

    reaction(
      () => this.cache.entries(),
      (value, prevValue) => {
        console.log(prevValue);
        console.log(value);
      }
    );

[danielkcz]

That is correct. If you need to watch over the whole thing, you can use toJS, but that generally beats the purpose of reactivity to "react" to changes of things you need.

[urugator]

This could help (you can skip first 4 paragraphs)

[scottwillman]

That's a really great explanation, thanks for the link. Ironically, creating a cache and trying to find the diffs was exactly how I was thinking at the time. So, thanks for this recalibration.