Jotai 使用说明

graph TD
  A[React Context] --> |全局状态|B{组件A}
  A --> |全局状态|C{组件B}
  B --> D[重新渲染]
  C --> E[重新渲染]

  F[Jotai] --> |原子状态1|G{组件A}
  F --> |原子状态2|H{组件B}
  G --> I[最小渲染]
  H --> J[最小渲染]

// App.tsx
import React from 'react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import TodoComponent from './TodoComponent';

const queryClient = new QueryClient();

const App = () => {
  return (
    <QueryClientProvider client={queryClient}>
      <TodoComponent />
    </QueryClientProvider>
  );
};

export default App;

// atoms.ts
import { atom } from 'jotai';

export const todosAtom = atom<Todo[]>([]);
export const todoInputAtom = atom<string>('');

// hooks.ts
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { useSetAtom, useAtomValue } from 'jotai';
import { todosAtom, todoInputAtom } from './atoms';

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

const fetchTodos = async (): Promise<Todo[]> => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos');
  if (!response.ok) throw new Error('Failed to fetch todos');
  return response.json();
};

const createTodo = async (title: string): Promise<Todo> => {
  const response = await fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({ title, completed: false }),
  });
  if (!response.ok) throw new Error('Failed to create todo');
  return response.json();
};

const updateTodo = async (todo: Todo): Promise<Todo> => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${todo.id}`, {
    method: 'PUT',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(todo),
  });
  if (!response.ok) throw new Error('Failed to update todo');
  return response.json();
};

const deleteTodo = async (id: number): Promise<void> => {
  const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
    method: 'DELETE',
  });
  if (!response.ok) throw new Error('Failed to delete todo');
};

export const useTodos = () => {
  const setTodos = useSetAtom(todosAtom);

  const query = useQuery('todos', fetchTodos);

  if (query.isSuccess) {
    setTodos(query.data);
  }

  return query;
};

export const useCreateTodo = () => {
  const queryClient = useQueryClient();
  const todoInput = useAtomValue(todoInputAtom);

  return useMutation(() => createTodo(todoInput), {
    onSuccess: (newTodo) => {
      queryClient.invalidateQueries('todos');
    },
  });
};

export const useUpdateTodo = () => {
  const queryClient = useQueryClient();

  return useMutation(updateTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries('todos');
    },
  });
};

export const useDeleteTodo = () => {
  const queryClient = useQueryClient();

  return useMutation((id: number) => deleteTodo(id), {
    onSuccess: () => {
      queryClient.invalidateQueries('todos');
    },
  });
};

// TodoComponent.tsx
import React from 'react';
import { useAtom } from 'jotai';
import { todosAtom, todoInputAtom } from './atoms';
import { useTodos, useCreateTodo, useUpdateTodo, useDeleteTodo } from './hooks';

const TodoComponent = () => {
  const [todos] = useAtom(todosAtom);
  const [todoInput, setTodoInput] = useAtom(todoInputAtom);

  const { isLoading, error } = useTodos();
  const createTodoMutation = useCreateTodo();
  const updateTodoMutation = useUpdateTodo();
  const deleteTodoMutation = useDeleteTodo();

  const handleCreateTodo = () => {
    if (todoInput.trim() === '') return;
    createTodoMutation.mutate();
    setTodoInput('');
  };

  const handleToggleTodo = (todo: Todo) => {
    updateTodoMutation.mutate({ ...todo, completed: !todo.completed });
  };

  const handleDeleteTodo = (id: number) => {
    deleteTodoMutation.mutate(id);
  };

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <input 
        type="text" 
        value={todoInput} 
        onChange={(e) => setTodoInput(e.target.value)} 
        placeholder="New Todo" 
      />
      <button onClick={handleCreateTodo}>Add Todo</button>
      
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <input 
              type="checkbox" 
              checked={todo.completed} 
              onChange={() => handleToggleTodo(todo)} 
            />
            {todo.title}
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoComponent;

import React, { createContext, useContext, useReducer } from 'react';

// 创建 Atom 的函数，每个 Atom 都有一个初始值
const createAtom = (initialValue) => {
  const atom = { value: initialValue }; // Atom 定义为一个对象，保存初始值
  return atom;
};

// 创建一个 React 上下文，用于在组件树中共享状态
const StateContext = createContext();

// 定义一个 reducer 函数，根据 action 类型更新状态
const stateReducer = (state, action) => {
  switch (action.type) {
    case 'SET': // 当 action 类型为 'SET' 时
      return {
        ...state, // 复制当前状态
        [action.atom]: action.value, // 更新指定 Atom 的值
      };
    default:
      return state; // 默认返回当前状态
  }
};

// 状态提供者组件，用于包装应用并提供初始状态
export const Provider = ({ children, initialState = {} }) => {
  const [state, dispatch] = useReducer(stateReducer, initialState); // 使用 useReducer 管理状态
  return (
    <StateContext.Provider value={{ state, dispatch }}> 
      {children} 
    </StateContext.Provider>
  );
};

// 自定义 Hook，用于组件中使用 Atom
export const useAtom = (atom) => {
  const { state, dispatch } = useContext(StateContext); // 获取当前状态和 dispatch 函数
  const setValue = (value) => {
    dispatch({ type: 'SET', atom, value }); // 定义设置新值的函数
  };
  return [state[atom] !== undefined ? state[atom] : atom.value, setValue]; // 返回当前值和设置函数
};

// 示例 Atom，用于计数
const countAtom = createAtom(0);

function Counter() {
  const [count, setCount] = useAtom(countAtom); // 使用自定义 Hook 获取当前计数值和设置函数
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button> 
      <p>Count: {count}</p> 
    </div>
  );
}

// 应用根组件，使用 Provider 包装并提供初始状态
function App() {
  return (
    <Provider initialState={{ [countAtom]: countAtom.value }}>
      <Counter />
    </Provider>
  );
}

export default App;