Is it possible to make observations of dynamic properties?

[dartess]

Given:

1. an observable dynamic collection like this::
   @observable prices: { [pair: string]: number } = {}

2. manually controlled requests for fetching and cleaning data (cleaning is important because in reality sockets are used, but I simplified it for the demo) like this:
   fetch('/prices/${pair}') and delete this.prices[pair]

Currently, control over what data should be loaded and what data should be cleared is done manually, externally. This is acceptable, but only as long as everything is stored in one place. As soon as there are two consumers, it becomes more difficult to synchronize data.

The idea on the surface is that it would be great if this process were automated. For example, some computed starts using store.prices.foo and store.prices.bar. There aren't exist, the computed gets undefineds. But the requests /prices/foo and /prices/bar automatically start and after completion they install the data. Now the computed has received the necessary data.

After some time and some reason, the computed stops using the bar and store.prices.bar should be automatically cleared.

Is it possible to do something like this?

[kubk]

Have you considered wrapping each of the pair into a separate instance of a class? For example:

class PricePair {
  constructor(public pair: string, public value: number) {
    makeAutoObservable()
  }
  
  // add computed's, define unsubscribe functions
}

And then store them as prices: PricePair[] or prices: Record<string, PricePair> = {}

[mweststrate]

@dartess you can also observe the pair, (assuming the key already exist), or doesnt it? onBecomeOpervedProperty(this.prices, "nike", ...)

[dartess]

I still have to control the list of required fields externally. This is difficult to do if there are several subscribers. I'll try to explain the problem again:

Let's assume that component A has subscribed to store.prices.foo and store.prices.bar. At the same time, component B subscribed to store.prices.bar and store.prices.nike.

At the moment of mounting A you need to load the data for foo and bar. At the time of mounting B, you only need to load nike. And at the moment of unmounting A you need to clear the data only for foo because the bar is still observed.

To avoid having to do this manually, I'm trying to delegate this to an observer mechanism.

So far I have tried combining Proxy to start tracking and child stores to finish tracking. It even works as intended, but it looks a little scary:

import { makeObservable, onBecomeUnobserved, observable, action } from 'mobx';

class UnitStore<TData> {
  constructor(onUnobserve: () => void) {
    makeObservable(this);

    onBecomeUnobserved(this, 'value', onUnobserve);
  }

  @observable public value: TData | undefined = undefined;

  @action setValue(newValue: TData) {
    this.value = newValue;
  }
}

type Disposer = () => void;

function observableCollection<TData>(
  onInit: (field: string, onData: (data: TData) => void) => Disposer,
): Record<string, TData> {
  const records: Record<string, UnitStore<TData>> = {};
  return new Proxy(records, {
    get(obj, prop) {
      if (typeof prop === 'symbol') {
        return;
      }
      if (!(prop in records)) {
        let disposer: Disposer;
        records[prop] = new UnitStore(() => {
          disposer?.();
          delete records[prop];
        });
        disposer = onInit(prop, data => records[prop].setValue(data));
      }
      return records[prop].value;
    },
  }) as Record<string, TData>;
}

export { observableCollection };

[mweststrate]

tbh I think I'd go for the simple option and create a getPrice(symbol) function and make the records private. That avoids the need to trap anything, and gives ample opportunity to handle null cases.

[dartess]

Of course, if I received data from the rest-api, I would not make such difficulties.
In my application, at the time of subscription to data, a subscription occurs in websockets. The data is then updated across the sockets as long as necessary. And at the moment of unsubscribing from the data, the unsubscription from websockets occurs.

[mweststrate]

I'm not directly seeing how that matters, but I might be misunderstanding the description. You don't have to change the data structure, MobX would still track fine through such utility while you keep the data in that observable map.

That being said, the proxy above looks like a reasonable approach