How to subscribe to changes of an atom for use outside of react?

[Noitidart]

I created a demo here - https://codesandbox.io/s/objective-kepler-2gl0n?file=/src/App.js

I want to make the state of the atom numAtom accessible from outside. This is the technique I'm using:

1. Create a global "ref". An object with {current: null} and mutate that whenever the numAtom changes.

// globally accessible by outside of react
const lastNum = { current: null };

const initialNum = 0;
const numAtom = atom(initialNum);
numAtom.onMount = () => {
  // on mount of first atom use, set current to the initial value
  lastNum.current = initialNum;

  // on unmount of last atom use, set current to null
  return () => {
    lastNum.current = null;
  };
};

// create dervied atom, to update the ref on changes, but this never fires
const numSubscribeAtom = atom(null, (get) => {
  console.log("subscription triggered, num:", get(numAtom));
  lastNum.current = get(numAtom);
});

[sandren]

There are a few different ways to make atom data accessible outside of the React tree.

Sync the atom value with a global variable

atomWithGlobal example:

import { atom } from 'jotai';
import type { WritableAtom } from 'jotai';

export const atomWithGlobal = (getVar: any, setVar: any): WritableAtom<Promise<never>, unknown> => {
  const baseAtom = atom(getVar());

  const anAtom = atom(
    (get) => get(baseAtom),
    (get, set, update) => {
      const newValue = typeof update === 'function' ? update(get(baseAtom)) : update;
      set(baseAtom, newValue);
      setVar(newValue);
    },
  );

  return anAtom;
};

Two-way data binding with a store or proxy

• atomWithStore (via jotai/zustand or jotai/redux bundles)
• atomWithProxy (via jotai/valtio bundle)

[Noitidart]

Thank you! This is very interesting. valtio is interesting. So the purpose of jotai is to make slices of the state? Was trying to think why jotai instead of valtio.

[dai-shi]

Here's modified codesandbox with the same fix as atomWithGlobal.
https://codesandbox.io/s/brave-glade-69fk0

jotai is modeled after useState+useContext. States are within React. So, using them outside React requires some effort.