Add a subscription to a store's value

[terrasoff]

Having a store, I'd like to subscribe to values changing:

const store = useStore(counter);
const unsubscribe = subscribe(store.count, (count, meta) => { ... })

Subscribing to the store's actions leads to multiple challenges:

const unsubscribe = onAction(Counter, "increment", (...args) => { ... })

1. I don't know which store emitted the event (in case I have multiple stores, created with Counter class). I'd not prefer to deal with ids like Counter-LZ0KDZOW1TCL.
2. If I have multiple actions (e.g. increment, decrement and reset), I need to subscribe to all the actions to track the counter's value.

[Marcisbee]

Hey for triggering update event you can create a utility function that uses subscribe and tracks changes in values across time. This should work fine with full typescript types support:

import { Exome, subscribe } from "exome";

function subscribeToValueChanges<Store extends Exome>(
  store: Store,
  properyNames: (keyof Store)[],
  callback: (instance: Store) => void,
) {
  const previousValueMap: Partial<Record<keyof Store, any>> = {};

  return subscribe(store, (instance) => {
    let hasChanges = false;

    for (const name of properyNames) {
      const previousValue = previousValueMap[name];
      const currentValue = instance[name];

      if (previousValue !== currentValue) {
        previousValueMap[name] = currentValue;
        hasChanges = true;
      }
    }

    if (!hasChanges) {
      return;
    }

    callback(instance);
  });
}

Usage:

subscribeToValueChanges(counterStore, ["count"], ({ count }) => {
  console.log("update event triggered", {count});
});

Live preview of this in action: https://dune.land/dune/ef3a15a9-6590-408e-b73c-76961a02bccb

---

As for onAction, you can pass null in place of action name to listen for all actions:

const unsubscribe = onAction(Counter, null, (...args) => { ... })

To match correct instance with correct action, you can use args returned in callback function. Or create a utility function that does this for you. Something lie this should do:

import { Exome, onAction } from "exome";

function onStoreAction<Store extends Exome>(
  store: Store,
  actions: (keyof Store)[],
  callback: Parameters<typeof onAction<Store>>[2],
  type?: Parameters<typeof onAction<Store>>[3],
) {
  return onAction(store.constructor as any, null, (instance, action, payload, error) => {
    if (instance !== store) {
      return;
    }

    if ((actions as string[]).indexOf(action) === -1) {
      return;
    }

    callback(instance as Store, action, payload, error);
  }, type);
}

Usage:

onStoreAction(counterStore1, ["increment"], ({ count }) => {
  console.log("Action `increment` on counterStore1 was triggered", {count});
});

Live preview of this in action: https://dune.land/dune/985d73db-381d-43ec-8943-45dbd10a530b

[terrasoff]

Nice, thanks for explanations.

I'd suggest to move this helpers to the library. Subscription to a value changes is the most popular use case for reactive stores.

[Marcisbee]

Yeah, will consider moving them to exome/utils.