jotai-zustand: update to zustand store does not reflect in the jotai store

[fenprace]

Bug Description

import { create } from 'zustand';
import { atomWithStore } from 'jotai-zustand';
import { getDefaultStore, useAtomValue } from 'jotai';

const zustandStore = create(() => 0);
const increment = () => zustandStore.setState((prev) => prev + 1);
const atom = atomWithStore(zustandStore);

const jotaiStore = getDefaultStore();

console.log(jotaiStore.get(atom)); // got 0, expect 0
increment();
console.log(jotaiStore.get(atom)); // got 0, expect 1 !!

I was trying to access value out-of-react of an atom created by atomWithStore. atomWithStore does not accept any jotai store as input, so I thought its inner context goes to the default store. Is this correct?

I could've got the value with zustandStore.getState(), but I am in a transition from zustand to jotai and I want my new code to only interact with jotai API.

Reproduction Link

https://stackblitz.com/edit/vitejs-vite-nini3fc9?file=src%2Fmain.js

[rothsandro]

atomWithStore uses onMount to subscribe to the Zustand store and sync it with the Jotai atom. onMount() will only be called when you subscribe to the atom but not if you just use get + set. If you use the atom inside React it will automatically work (as the hook subscribe to the atom).

You can manually subscribe to the atom, so it starts subscribing to the Zustand store:

const unsub = jotaiStore.sub(atom, () => {});

[fenprace]

Thanks for this explanation!

I was trying to subscribe to zustandStore changes manually, but this did not work:

const zustandStore = create(() => 0);
const increment = () => zustandStore.setState((prev) => prev + 1);
const atom = atomWithStore(zustandStore);

const jotaiStore = getDefaultStore();

zustandStore.subscribe(newState => {
  jotaiStore.set(atom, newState);
})

console.log(jotaiStore.get(atom)); // got 0, expect 0
increment();
console.log(jotaiStore.get(atom)); // got 0, expect 1 !!

I understand that _set is never called in the write function of derivedAtom. jotaiStore.set(atom, newState) updates zustandStore, but not jotaiStore. I am curious why we made atomWithStore works that way?

This is finally what I got to work. This way the jotaiAtom is a read-only atom.

import { create } from 'zustand';
import { getDefaultStore, atom } from 'jotai';

const zustandStore = create(() => 0);
const increment = () => zustandStore.setState((prev) => prev + 1);
const jotaiAtom = atom(zustandStore.getState());

const jotaiStore = getDefaultStore();

zustandStore.subscribe((newState) => {
  jotaiStore.set(jotaiAtom, newState);
});

console.log(jotaiStore.get(jotaiAtom)); // got 0, expect 0
increment();
console.log(jotaiStore.get(jotaiAtom)); // got 1, expect 1

[rothsandro]

atomWithStore needs to listen to the Zustand Store anyway to work, and with that the base atom will be updated, so there is no need to call _set(). Calling _set() would still not update the Jota atom if you update the Zustand store.

If that works for you that's okay but if you have more use cases I recommend atomWithStore and subscribing to the atom as I showed above.