Jotai dengan Claude Code

状態manajemenを実現 Jotaiでボトムアップ

Jotai 「アトム」 dan 呼ば最小単位 状態 manajemen React向けlibrary.Recoil 似たアプローチ す 、よりシンプルなAPI dan TypeScriptファースト 設計 fitur.Claude Code アトム設計 dari kompleksな派生状態 pembangunanま 的確 generate.

設計 dasar的なアトム

Claude Code アトム 構成 依頼し.

> Jotai dengan ダークモードdukungan temamanajemen buatkan.
> sistempengaturan 検出、persistensi、komponen dari peralihan support.

import { atom, useAtom, useAtomValue, useSetAtom } from "jotai";
import { atomWithStorage } from "jotai/utils";

type Theme = "light" | "dark" | "system";

// localStorage persistensiされるアトム
const themePreferenceAtom = atomWithStorage<Theme>("theme", "system");

// sistem ダークモードpengaturan 検出読み取り専用アトム
const systemDarkModeAtom = atom<boolean>((get) => {
  if (typeof window === "undefined") return false;
  return window.matchMedia("(prefers-color-scheme: dark)").matches;
});

// 実際 適用されるtema 計算派生アトム
const resolvedThemeAtom = atom<"light" | "dark">((get) => {
  const preference = get(themePreferenceAtom);
  if (preference === "system") {
    return get(systemDarkModeAtom) ? "dark" : "light";
  }
  return preference;
});

// カスタムフック
export function useTheme() {
  const [preference, setPreference] = useAtom(themePreferenceAtom);
  const resolvedTheme = useAtomValue(resolvedThemeAtom);

  return {
    preference,
    resolvedTheme,
    setTheme: setPreference,
    isDark: resolvedTheme === "dark",
  };
}

派生アトムでkompleksな状態を構成

アトム 組み合わせてkompleksな状態 表現 pola.

// dasarアトム
const todosAtom = atom<Todo[]>([]);
const filterAtom = atom<"all" | "active" | "completed">("all");
const searchQueryAtom = atom("");

// 派生アトム: filteringされたTodo
const filteredTodosAtom = atom((get) => {
  const todos = get(todosAtom);
  const filter = get(filterAtom);
  const query = get(searchQueryAtom).toLowerCase();

  let result = todos;

  // フィルタ適用
  switch (filter) {
    case "active":
      result = result.filter((t) => !t.completed);
      break;
    case "completed":
      result = result.filter((t) => t.completed);
      break;
  }

  // pencarian適用
  if (query) {
    result = result.filter((t) => t.title.toLowerCase().includes(query));
  }

  return result;
});

// 統計情報 派生アトム
const todoStatsAtom = atom((get) => {
  const todos = get(todosAtom);
  return {
    total: todos.length,
    active: todos.filter((t) => !t.completed).length,
    completed: todos.filter((t) => t.completed).length,
    completionRate: todos.length
      ? Math.round(
          (todos.filter((t) => t.completed).length / todos.length) * 100
        )
      : 0,
  };
});

非同期アトムでデータpengambilan

Jotai 非同期アトム 使ってserver dari データ pengambilan pola.

import { atom } from "jotai";
import { atomWithQuery } from "jotai-tanstack-query";

// 非同期 read-writeアトム
const currentUserAtom = atom<User | null>(null);

const fetchUserAtom = atom(
  (get) => get(currentUserAtom),
  async (_get, set) => {
    const response = await fetch("/api/me");
    const user = await response.json();
    set(currentUserAtom, user);
  }
);

// TanStack Query dan integrasi
const userQueryAtom = atomWithQuery((get) => ({
  queryKey: ["user", get(userIdAtom)],
  queryFn: async ({ queryKey: [, userId] }) => {
    const res = await fetch(`/api/users/${userId}`);
    return res.json();
  },
  enabled: !!get(userIdAtom),
}));

アトムファミリーで動的なアトムgenerate

アイテムご dan 独立 アトム 動的 generate pola.

import { atom } from "jotai";
import { atomFamily } from "jotai/utils";

// IDご dan 独立アトム generate
const todoAtomFamily = atomFamily((id: string) =>
  atom<Todo>({
    id,
    title: "",
    completed: false,
    createdAt: new Date(),
  })
);

// IDリスト manajemenアトム
const todoIdsAtom = atom<string[]>([]);

// Usage example
function TodoItem({ id }: { id: string }) {
  const [todo, setTodo] = useAtom(todoAtomFamily(id));

  const toggleComplete = () => {
    setTodo((prev) => ({ ...prev, completed: !prev.completed }));
  };

  return (
    <div>
      <input
        type="checkbox"
        checked={todo.completed}
        onChange={toggleComplete}
      />
      <span>{todo.title}</span>
    </div>
  );
}

function TodoList() {
  const ids = useAtomValue(todoIdsAtom);
  return (
    <div>
      {ids.map((id) => (
        <TodoItem key={id} id={id} />
      ))}
    </div>
  );
}

使い分け Zustand

Jotai dan Zustand どちら juga React 状態manajemenlibrary す 、アプローチ 異なり.

• Jotai - ボトムアップ。小さなアトム 組み合わせて状態 pembangunan。komponen 密結合な状態 向く
• Zustand - トップダウン。store単位 状態 設計。グローバルなビジネスロジック 向く

両者 組み合わせるこ dan juga dimungkinkan.UI 局所的な状態 Jotai、aplikasi全体 状態 Zustand dan いう使い分け 効果的.

Summary

Jotai アトミックなアプローチ 、komponen単位 状態manajemen 優れてい.Claude Code pemanfaatanすれば、アトム設計 dari 派生状態 pembangunan、非同期pemrosesanま 素早くimplementasi bisa dilakukan.

store型 状態manajemen Zustand状態manajemenpanduan 、React pengembangan全般 Reactpengembangan 爆速 metode silakan lihat.Jotai公式dokumen juga 併せてkonfirmasiし.