项目结构 #

src/
├── atoms/                    # Atom 定义
│   ├── index.js             # 统一导出
│   ├── userAtoms.js         # 用户相关 Atom
│   ├── todoAtoms.js         # Todo 相关 Atom
│   └── uiAtoms.js           # UI 状态 Atom
├── selectors/                # Selector 定义
│   ├── index.js             # 统一导出
│   ├── userSelectors.js     # 用户相关 Selector
│   └── todoSelectors.js     # Todo 相关 Selector
├── hooks/                    # 自定义 Hooks
│   ├── useUser.js           # 用户相关 Hook
│   ├── useTodo.js           # Todo 相关 Hook
│   └── useAuth.js           # 认证相关 Hook
├── components/               # React 组件
│   ├── common/              # 通用组件
│   ├── user/                # 用户相关组件
│   └── todo/                # Todo 相关组件
├── effects/                  # Atom Effects
│   ├── localStorage.js      # 本地存储 Effect
│   └── sync.js              # 同步 Effect
├── utils/                    # 工具函数
│   └── helpers.js
└── App.jsx                   # 根组件

src/
├── modules/
│   ├── user/                 # 用户模块
│   │   ├── atoms.js         # 用户 Atom
│   │   ├── selectors.js     # 用户 Selector
│   │   ├── hooks.js         # 用户 Hook
│   │   ├── components/      # 用户组件
│   │   └── index.js         # 模块导出
│   ├── todo/                 # Todo 模块
│   │   ├── atoms.js
│   │   ├── selectors.js
│   │   ├── hooks.js
│   │   ├── components/
│   │   └── index.js
│   └── ui/                   # UI 模块
│       ├── atoms.js
│       ├── selectors.js
│       └── index.js
├── common/                   # 公共资源
│   ├── components/
│   ├── hooks/
│   └── utils/
└── App.jsx

const userState = atom({
  key: 'user',
  default: null,
});

const userSettingsState = atom({
  key: 'userSettings',
  default: {
    theme: 'light',
    language: 'en',
  },
});

const userAtoms = {
  userState: atom({
    key: 'user',
    default: null,
  }),
  
  userSettingsState: atom({
    key: 'userSettings',
    default: { theme: 'light' },
  }),
  
  userPreferencesState: atom({
    key: 'userPreferences',
    default: {},
  }),
};

export default userAtoms;

export { default as userAtoms } from './userAtoms';
export { default as todoAtoms } from './todoAtoms';
export { default as uiAtoms } from './uiAtoms';

import { selector } from 'recoil';
import { todoListState } from './todoAtoms';

export const todoStatsState = selector({
  key: 'todoStats',
  get: ({ get }) => {
    const list = get(todoListState);
    return {
      total: list.length,
      completed: list.filter(t => t.completed).length,
    };
  },
});

export const filteredTodoListState = selector({
  key: 'filteredTodoList',
  get: ({ get }) => {
    const list = get(todoListState);
    const filter = get(todoFilterState);
    
    switch (filter) {
      case 'completed':
        return list.filter(t => t.completed);
      case 'active':
        return list.filter(t => !t.completed);
      default:
        return list;
    }
  },
});

import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import { todoListState, todoFilterState } from '../atoms/todoAtoms';

export function useTodo() {
  const [todos, setTodos] = useRecoilState(todoListState);
  const [filter, setFilter] = useRecoilState(todoFilterState);
  
  const addTodo = (text) => {
    setTodos(prev => [
      ...prev,
      { id: Date.now(), text, completed: false },
    ]);
  };
  
  const toggleTodo = (id) => {
    setTodos(prev => prev.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };
  
  const deleteTodo = (id) => {
    setTodos(prev => prev.filter(todo => todo.id !== id));
  };
  
  const clearCompleted = () => {
    setTodos(prev => prev.filter(todo => !todo.completed));
  };
  
  return {
    todos,
    filter,
    setFilter,
    addTodo,
    toggleTodo,
    deleteTodo,
    clearCompleted,
  };
}

export function useUser() {
  const [user, setUser] = useRecoilState(userState);
  const settings = useRecoilValue(userSettingsState);
  const setSettings = useSetRecoilState(userSettingsState);
  
  const login = async (credentials) => {
    const response = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials),
    });
    const data = await response.json();
    setUser(data.user);
  };
  
  const logout = () => {
    setUser(null);
  };
  
  const updateSettings = (newSettings) => {
    setSettings(prev => ({ ...prev, ...newSettings }));
  };
  
  return {
    user,
    settings,
    login,
    logout,
    updateSettings,
    isLoggedIn: !!user,
  };
}

export const localStorageEffect = (key) => ({ setSelf, onSet }) => {
  const savedValue = localStorage.getItem(key);
  if (savedValue != null) {
    setSelf(JSON.parse(savedValue));
  }
  onSet((newValue, _, isReset) => {
    isReset
      ? localStorage.removeItem(key)
      : localStorage.setItem(key, JSON.stringify(newValue));
  });
};

export const sessionStorageEffect = (key) => ({ setSelf, onSet }) => {
  const savedValue = sessionStorage.getItem(key);
  if (savedValue != null) {
    setSelf(JSON.parse(savedValue));
  }
  onSet((newValue, _, isReset) => {
    isReset
      ? sessionStorage.removeItem(key)
      : sessionStorage.setItem(key, JSON.stringify(newValue));
  });
};

import { localStorageEffect } from '../effects/localStorage';

const userSettingsState = atom({
  key: 'userSettings',
  default: { theme: 'light' },
  effects: [localStorageEffect('user_settings')],
});

const userState = atom({ key: 'userState', default: null });
const todoListState = atom({ key: 'todoListState', default: [] });
const isLoggedInState = atom({ key: 'isLoggedInState', default: false });

const filteredTodoListState = selector({ key: 'filteredTodoListState', ... });
const todoStatsState = selector({ key: 'todoStatsState', ... });
const userNameState = selector({ key: 'userNameState', ... });

const todoFamily = atomFamily({ key: 'todoFamily', ... });
const userQueryFamily = atomFamily({ key: 'userQueryFamily', ... });

const userQueryState = selectorFamily({ key: 'userQueryState', ... });
const searchResultsState = selectorFamily({ key: 'searchResultsState', ... });

src/
├── modules/
│   ├── auth/
│   │   ├── atoms.js
│   │   ├── selectors.js
│   │   ├── hooks.js
│   │   ├── components/
│   │   │   ├── LoginForm.jsx
│   │   │   └── LogoutButton.jsx
│   │   └── index.js
│   ├── todo/
│   │   ├── atoms.js
│   │   ├── selectors.js
│   │   ├── hooks.js
│   │   ├── components/
│   │   │   ├── TodoList.jsx
│   │   │   ├── TodoItem.jsx
│   │   │   └── TodoInput.jsx
│   │   └── index.js
│   └── ui/
│       ├── atoms.js
│       └── components/
│           ├── ThemeToggle.jsx
│           └── Modal.jsx
├── effects/
│   └── storage.js
├── common/
│   ├── components/
│   │   ├── Button.jsx
│   │   └── Input.jsx
│   └── hooks/
│       └── useDebounce.js
└── App.jsx