■P182

────────────────
https://www.npmjs.com/package/zustand
────────────────

────────────────
https://npmtrends.com/jotai-vs-recoil-vs-redux-vs-zustand
────────────────


■P183

────────────────
https://risingstars.js.org/2024/en
────────────────


■P185

────────────────
https://github.com/pmndrs/zustand
────────────────

■P187

────────────────
npm install zustand
────────────────

────────────────
import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () =>
    set((state) => ({ count: state.count + 1 })),
  reset: () => set({ count: 0 }),
}));
────────────────


■P188

────────────────
import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  increment: () =>
    set((state) => ({ count: state.count + 1 })),
  reset: () => set({ count: 0 }),
}));

const Counter = () => {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);
  const reset = useStore((state) => state.reset);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={increment}>増やす</button>
      <button onClick={reset}>リセット</button>
    </div>
  );
};

export default Counter;
────────────────


■P189

────────────────
import { create } from "zustand";

const useStore = create((set) => ({
  count: 0,
  username: "ユーザー名",
  increment: () =>
    set((state) => ({ count: state.count + 1 })),
  reset: () => set({ count: 0 }),
}));

const Counter = () => {
  const count = useStore((state) => state.count);
  const increment = useStore((state) => state.increment);
  const reset = useStore((state) => state.reset);

  console.log("Counter is rendered!");

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={increment}>増やす</button>
      <button onClick={reset}>リセット</button>
    </div>
  );
};

const UserInfo = () => {
  const username = useStore((state) => state.username);

  console.log("UserInfo is rendered!");

  return <p>ユーザー名: {username}</p>;
};

const App = () => {
  return (
    <div style={{ display: "grid", gap: "20px" }}>
      <Counter />
      <UserInfo />
    </div>
  );
};

export default App;
────────────────


■P191

────────────────
https://jotai.org
────────────────


■P193

────────────────
npm install jotai
────────────────

────────────────
import { atom } from "jotai";

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

────────────────
import { atom, useAtom } from "jotai";

const countAtom = atom(0);

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);

  const increment = () => setCount((prev) => prev + 1);
  const reset = () => setCount(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={increment}>増やす</button>
      <button onClick={reset}>リセット</button>
    </div>
  );
};

export default Counter;
────────────────


■P194

────────────────
import { atom } from "jotai";

const countAtom = atom(0);
const doubledCountAtom = atom((get) => get(countAtom) * 2);
────────────────


■P195

────────────────
import { atom, useAtom, useAtomValue } from "jotai";

const countAtom = atom(0);
const doubledCountAtom = atom((get) => get(countAtom) * 2);

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);
  // useAtomValueを使ってRead only atomを読み込む
  const doubledCount = useAtomValue(doubledCountAtom);

  const increment = () => setCount((prev) => prev + 1);
  const reset = () => setCount(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <p>二倍のカウント: {doubledCount}</p>
      <button onClick={increment}>増やす</button>
      <button onClick={reset}>リセット</button>
    </div>
  );
};

export default Counter;
────────────────


■P196

────────────────
import { atom, useAtomValue, useSetAtom } from "jotai";

const countAtom = atom(0);
// countAtomを操作するWrite only atom
const incrementAtom = atom(null, (_get, set) => {
  set(countAtom, (prev) => prev + 1);
});
const resetAtom = atom(null, (_get, set) => {
  set(countAtom, 0);
});

const Counter = () => {
  const count = useAtomValue(countAtom);
  // useSetAtomを使ってWrite only atomを読み込む
  const increment = useSetAtom(incrementAtom);
  const reset = useSetAtom(resetAtom);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={increment}>増やす</button>
      <button onClick={reset}>リセット</button>
    </div>
  );
};

export default Counter;
────────────────

