ReactでJotaiを使い、状態をatomに分けて共有する方法

import { atom } from 'jotai';

// 小さな atom を、値ごとに1つずつ作る
export const nameAtom = atom('たま');
export const mealsAtom = atom(0);

// ほかの atom から計算する atom（読み取り専用）
export const isHungryAtom = atom((get) => get(mealsAtom) < 3);

// 書き込み専用の atom（アクション）
export const feedAtom = atom(null, (_get, set) => {
  set(mealsAtom, (meals) => meals + 1);
});

export const resetAtom = atom(null, (_get, set) => {
  set(nameAtom, 'たま');
  set(mealsAtom, 0);
});

const setHungry = useSetAtom(isHungryAtom); // 読み取り専用の atom に書き込む
store.set(mealsAtom, '3');                 // 数値の atom に文字列
store.set(feedAtom, 1);                    // 引数を受け取らない書き込み専用の atom に引数

errors/ReadOnly.tsx(5,32): error TS2769: No overload matches this call.
  The last overload gave the following error.
    Property 'write' is missing in type 'Atom<boolean>' but required in type 'WritableAtom<unknown, never[], unknown>'.
errors/WrongValue.ts(5,22): error TS2345: Argument of type 'string' is not assignable to parameter of type 'SetStateAction<number>'.
errors/WrongValue.ts(6,21): error TS2554: Expected 1 arguments, but got 2.

const selectedIdAtom = atom(null);              // null しか入らない
const typedIdAtom = atom<number | null>(null);  // 数値も入る

errors/NullAtom.ts(7,27): error TS2345: Argument of type '1' is not assignable to parameter of type 'SetStateAction<null>'.

import { useAtom, useAtomValue, useSetAtom } from 'jotai';
import { nameAtom, mealsAtom, isHungryAtom, feedAtom } from './catAtoms';

function MealCount() {
  const meals = useAtomValue(mealsAtom);
  return <p>ごはん：{meals}回</p>;
}

function NameTag() {
  const name = useAtomValue(nameAtom);
  return <p>名前：{name}</p>;
}

function HungryBadge() {
  const isHungry = useAtomValue(isHungryAtom);
  return <p>{isHungry ? 'おなかすいた' : 'まんぞく'}</p>;
}

function Buttons() {
  const feed = useSetAtom(feedAtom);
  const setName = useSetAtom(nameAtom);
  return (
    <div>
      <button onClick={() => feed()}>ごはんをあげる</button>
      <button onClick={() => setName('みけ')}>名前を「みけ」にする</button>
    </div>
  );
}

function ResetMeals() {
  const [, setMeals] = useAtom(mealsAtom);
  return <button onClick={() => setMeals(0)}>ごはんを0回に戻す</button>;
}

import { Provider, createStore, useAtom } from 'jotai';
import { mealsAtom } from './catAtoms';

function Counter({ label }: { label: string }) {
  const [meals, setMeals] = useAtom(mealsAtom);
  return (
    <p>
      {label}：{meals}回{' '}
      <button onClick={() => setMeals((m) => m + 1)}>+1</button>
    </p>
  );
}

const roomStore = createStore();
roomStore.set(mealsAtom, 5);

export function Scopes() {
  return (
    <>
      <Counter label="Providerなし A" />
      <Counter label="Providerなし B" />
      <Provider>
        <Counter label="Provider（storeなし）" />
      </Provider>
      <Provider store={roomStore}>
        <Counter label="Provider（roomStore）" />
      </Provider>
    </>
  );
}

import { createStore } from 'jotai';
import { nameAtom, mealsAtom, isHungryAtom, feedAtom } from './catAtoms';

const store = createStore();
const unsubMeals = store.sub(mealsAtom, () => {
  console.log(`# sub(mealsAtom): ${store.get(mealsAtom)}`);
});
const unsubHungry = store.sub(isHungryAtom, () => {
  console.log(`# sub(isHungryAtom): ${store.get(isHungryAtom)}`);
});

for (let i = 0; i < 4; i++) store.set(feedAtom);
store.set(nameAtom, 'みけ');
unsubMeals();
unsubHungry();

# sub(mealsAtom): 1
# sub(mealsAtom): 2
# sub(mealsAtom): 3
# sub(isHungryAtom): false
# sub(mealsAtom): 4

export function AtomInRender() {
  const [count, setCount] = useAtom(atom(0));
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}

export function AtomWithMemo() {
  const countAtom = useMemo(() => atom(0), []);
  const [count, setCount] = useAtom(countAtom);
  return <button onClick={() => setCount((c) => c + 1)}>{count}</button>;
}