Persist computed value to disk via reaction?

[IanBellomy]

Have a peculiar case of wanting to use a reaction to automatically persist, in storage, values that are generated during a computed derivation.

Below is improper mobx but hopefully illustrative.

class SeedStore {
  @observable
  _cache: {}
  
  @action
  getOrMintSeed(key) {
    return this._cache[key] ??= Math.random();
  }
}

...

// Seems simplest and most clear to auto-save in response to changes in the store's cache.
reaction(
  () => JSON.stringify(someSeedStore)
  (val)=> // to storage...
)

...

abstract class SeedConsumer {  
  ...
  // For reasons* this must be lazy rather than, say, handled in the constructor.
  @computed
  protected get seededRandom() {
    return someSeededPRNG(someSeedStore.getOrMintSeed(this.id))  // generate a determinate sequence of numbers stable across the argument (the minted seed) 
  }
}

It seems like it might be best to mint seeds in a SeedConsumer constructor, but it's problematic or impossible -- Many concrete SeedConsumer classes won't touch seededRandom at all; those that would use it may be destroyed before accessing it; those that do access it may want to include, in the param/key, app/instance state unique to the time at which seededRandom is first accessed, so ideally the SeedStore generates and caches a value only when absolutely needed.

[aniruddhaadak80]

@bforte Since you want to persist after a value changes, reaction or autorun is the correct tool, not computed.
Computed should be pure (no side effects like storage writing).

Pattern:

class Store {
  @observable _cache = {}
  
  constructor() {
    this.hydrate();
    // Setup persistence listener
    reaction(
      () => JSON.stringify(this._cache),
      (json) => localStorage.setItem(''key'', json)
    );
  }
}

Keeping the "minting" logic separate from the "persistence" logic is cleaner.

[IanBellomy]

Apologies for the confusion; persisting after a value change via a reaction is exactly what I'm doing and what I meant the example to show but I understand this was not clear because my example reacted to SeedStore generally and not the observable SeedStore._cache specifically. (In reality the Store has a toJSON method that rolls up _cache with other state.) I've updated the example to make this more clear.

The problem is that the changes to the observable _cache are happening as a seemingly necessary side effect of a computed.

The problem is a variant of the one here (#1910) but instead of needing to react to cache deletions, I need to react to the cache additions.

(To the best of my knowledge, the Atom solution there won't work for me because it's not possible (or is problematic) to call atom.reportChanged(true) inside a computed stack.)