Is there a way to subscribe atom value change?

[sixmen]

I want to do some action when an atom's value is changed.
(for example, reset some atoms' values when other atom is changed, and derived atom is not applicable)

For example, see following code.

const countAtom = atom(0);
const doneAtom = atom(0);

const add1Atom = atom(null, (get, set) => {
  const count = get(countAtom)+1;
  set(countAtom, count);
  if (count >= 10) {
    set(doneAtom, 1);
  }
})

const add3Atom = atom(null, (get, set) => {
  const count = get(countAtom)+3;
  set(countAtom, count);
  if (count >= 10) {
    set(doneAtom, 1);
  }
})

I think it is handy if I can write code like this

countAtom.subscribe((value, get, set) => {
  if (value >= 10) {
    set(doneAtom, 1);
  }
});

Is there a utility that I can use for similar use case?

[dai-shi]

Related discussion: #1085

However, from your code snippet, you seem to expect to run the callback in sync. We don't have a capability to register such callbacks. Imperative code must be defined only in write.

So, I would use this pattern:

const countAtom = atom(0); // I would avoid exposing this to update it directly.
const doneAtom = atom(0);
const updateCount = atom(null, (get, set, arg) => {
  set(countAtom, arg);
  if (get(countAtom) >= 10) {
    set(doneAtom, 1);
  }
});

const add1Atom = atom(null, (get, set) => {
  set(updateCount, get(countAtom) + 1);
});

const add3Atom = atom(null, (get, set) => {
  set(updateCount, get(countAtom) + 3);
});

You could also define doneAtom as a derived atom, but it's very different (=declarative code).

[sixmen]

Yes, it will works. But countAtom & doneAtom are unrelated, so I want to avoid above pattern.

I thought an another example that resembles my current problem.

const rangeAtom = atom(5);
const currentAtom = atom(3);

const decRange = atom(null, (get, set) => {
  const r = get(rangeAtom) - 1;
  set(rangeAtom, r);
  if (get(currentAtom) >= r) {
    set(currentAtom, r-1);
  }
})

const App = () => {
  const range = useAtomValue(rangeAtom);
  const current = useAtomValue(currentAtom);
  const dec = useSetAtom(decRange);
  return <Provider>
    {current}
    <select value={current}>
      {new Array(range).fill(0).map((_v, i) =>
        <option value={i}>{i}</option>)}
    </select>
    <button onClick={dec}>Dec</button>
  </Provider>
}

It worked, but it seems weired to me that decRange can change the currentAtom.

My another solution that applied to my previous similar problem is using callback atom.

const onRangeChange = atom<WritableAtom<null, number> | undefined>(undefined);
const decRange = atom(null, (get, set) => {
  const r = get(rangeAtom) - 1;
  set(rangeAtom, r);
  if (get(onRangeChange)) {
    set(get(onRangeChange), r);
  }
})

<Provider initialValues={[[onRangeChange, () => ...]} />

Actually, I want to modularize some atoms, so breaking dependencies is important.

---

If there is no good solution, I also think write-only atom is the only way as you wrote.

[dai-shi]

it seems weired to me that decRange can change the currentAtom.

Hm, it doesn't seem too weird to me, because currentAtom depends on the range.

A declarative way is something like this:

const rangeAtom = atom(5);
const currentAtom = atom(3);
const validCurrentAton = atom((get) => Math.max(get(currentAtom), get(rangeAtom) - 1));

const decRange = atom(null, (get, set) => {
  const r = get(rangeAtom) - 1;
  set(rangeAtom, r);
})

My another solution that applied to my previous similar problem is using callback atom.

This seems like a valid solution.

[sixmen]

it seems weired to me that decRange can change the currentAtom.

Hm, it doesn't seem too weird to me, because currentAtom depends on the range.

A declarative way is something like this:

const rangeAtom = atom(5);
const currentAtom = atom(3);
const validCurrentAton = atom((get) => Math.max(get(currentAtom), get(rangeAtom) - 1));

const decRange = atom(null, (get, set) => {
  const r = get(rangeAtom) - 1;
  set(rangeAtom, r);
})

My another solution that applied to my previous similar problem is using callback atom.

This seems like a valid solution.

Yes, this is an another possible solution. I will think more...

[sixmen]

I used Mithril.js prior to React. With Stream I can write like this.

this.range = stream(5);
this.current = stream(3);

this.range.map((value) => {
    if(this.current() >= value) {
        this.current(value-1);
    }
})

I thought stream is very similiary to Jotai's atom. I just missed that pattern.

(Yes. map is for computed properties(derived atoms), and it may be not a good pattern 😞 )

[StringKe]

@dai-shi I'm wondering if there are any further optimizations possible for such an implementation?

I tried an implementation in something like jotai-effect and found that I couldn't read the previous variables.

Also my code can't avoid multiple updates in a short period of time, what should I do to do this? Maybe debounce fn is needed?

export const designStore = atom(
    (get) => {
        return get(appStore).design;
    },
    (get, set, setValue: SetStateAction<IDesignStore>) => {
        set(appStore, (prev) => {
            const newValue = {
                ...prev,
                design: callSetState(prev.design, setValue),
            } as IAppStore;

            if (!get(historyStore).isPause) {
                const previousState = prev.design;
                const currentState = newValue.design;
                const diffResult = diff(previousState, currentState);
                set(historyStore, (prev) => {
                    return {
                        ...prev,
                        undoStack: [...prev.undoStack, diffResult],
                        redoStack: [],
                    } as IHistoryStore;
                });
            }

            return newValue;
        });
    },
);

[dai-shi]

Your code looks good to me. Can you pin point what you would like to fix?

[StringKe]

At the moment I just know that this way allows me to get the value before it was changed.

I use designStore to control my canvas rendering.

1. In the rendering logic, I need to re-render as soon as a change occurs. (current rendering)

2. In the history logic, I don't need to log once immediately (e.g. in Slider / long-pressable components, logging should be generated after stopping .)

The different sub-atoms that would be dispatched through the designStore would be cumbersome and unmanageable if they were passed through something like withHistoryAtom on each atom.

[StringKe]

Just think that this video color will always change, but the history should be recorded at the moment the color modification stops.

CleanShot.2024-04-26.at.19.47.27.mp4

[dai-shi]

At the moment I just know that this way allows me to get the value before it was changed.

Got it. Yeah, this should be the right way. One nit is that I wouldn't use the update function (as I prefer it to be a pure function.)

export const designStore = atom(
    (get) => {
        return get(appStore).design;
    },
    (get, set, setValue: SetStateAction<IDesignStore>) => {
        const prevValue = get(appStore);
        const newValue = {
            ...prevValue,
            design: callSetState(prev.design, setValue),
        } as IAppStore;

        if (!get(historyStore).isPause) {
            const previousState = prev.design;
            const currentState = newValue.design;
            const diffResult = diff(previousState, currentState);
            set(historyStore, (prev) => {
                return {
                    ...prev,
                    undoStack: [...prev.undoStack, diffResult],
                    redoStack: [],
                } as IHistoryStore;
            });

        }

        set(appSotre, newValue);
    },
);