零度AI
高级14 分钟阅读

Claude Code 状态管理

学习使用 Claude Code 管理复杂应用的状态，包括 Context、Redux、Zustand 等

Claude Code状态管理ReactReduxZustand

状态管理概述

在复杂应用中，状态管理是一个核心挑战。Claude Code 可以帮助你：

  • 选择合适的状态管理方案
  • 实现状态逻辑
  • 优化性能
  • 避免常见陷阱

React 原生状态管理

1. useState

typescript
import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>计数: {count}</p>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </div>
  )
}

2. useReducer

typescript
import { useReducer } from 'react'

interface State {
  count: number
}

type Action = { type: 'increment' } | { type: 'decrement' }

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 }
    case 'decrement':
      return { count: state.count - 1 }
    default:
      return state
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 })

  return (
    <div>
      <p>计数: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>增加</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>减少</button>
    </div>
  )
}

Context API

创建 Context

定义 Context

typescript
// src/contexts/ThemeContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react'

type Theme = 'light' | 'dark'

interface ThemeContextType {
  theme: Theme
  toggleTheme: () => void
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined)

export function ThemeProvider({ children }: { children: ReactNode }) {
  const [theme, setTheme] = useState<Theme>('light')

  const toggleTheme = () => {
    setTheme(prev => prev === 'light' ? 'dark' : 'light')
  }

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  )
}

export function useTheme() {
  const context = useContext(ThemeContext)
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider')
  }
  return context
}

使用 Provider

typescript
// src/app/layout.tsx
import { ThemeProvider } from '@/contexts/ThemeContext'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

使用 Context

typescript
// src/components/ThemeToggle.tsx
import { useTheme } from '@/contexts/ThemeContext'

export default function ThemeToggle() {
  const { theme, toggleTheme } = useTheme()

  return (
    <button onClick={toggleTheme}>
      {theme === 'light' ? '切换到深色' : '切换到浅色'}
    </button>
  )
}

Zustand

1. 创建 Store

typescript
// src/store/userStore.ts
import { create } from 'zustand'

interface User {
  id: string
  name: string
  email: string
}

interface UserState {
  user: User | null
  setUser: (user: User) => void
  clearUser: () => void
}

export const useUserStore = create<UserState>((set) => ({
  user: null,
  setUser: (user) => set({ user }),
  clearUser: () => set({ user: null })
}))

2. 使用 Store

typescript
import { useUserStore } from '@/store/userStore'

function UserProfile() {
  const user = useUserStore((state) => state.user)
  const setUser = useUserStore((state) => state.setUser)
  const clearUser = useUserStore((state) => state.clearUser)

  if (!user) {
    return (
      <div>
        <button onClick={() => setUser({
          id: '1',
          name: '张三',
          email: 'zhangsan@example.com'
        })}>
          登录
        </button>
      </div>
    )
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
      <button onClick={clearUser}>退出</button>
    </div>
  )
}

Redux Toolkit

1. 创建 Slice

typescript
// src/features/tasks/tasksSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit'

interface Task {
  id: string
  title: string
  completed: boolean
}

interface TasksState {
  tasks: Task[]
  loading: boolean
  error: string | null
}

const initialState: TasksState = {
  tasks: [],
  loading: false,
  error: null
}

const tasksSlice = createSlice({
  name: 'tasks',
  initialState,
  reducers: {
    addTask: (state, action: PayloadAction<Task>) => {
      state.tasks.push(action.payload)
    },
    toggleTask: (state, action: PayloadAction<string>) => {
      const task = state.tasks.find(t => t.id === action.payload)
      if (task) {
        task.completed = !task.completed
      }
    }
  }
})

export const { addTask, toggleTask } = tasksSlice.actions
export default tasksSlice.reducer

2. 配置 Store

typescript
// src/app/store.ts
import { configureStore } from '@reduxjs/toolkit'
import tasksReducer from '@/features/tasks/tasksSlice'

export const store = configureStore({
  reducer: {
    tasks: tasksReducer
  }
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

3. 使用 Redux

typescript
import { useSelector, useDispatch } from 'react-redux'
import { RootState, AppDispatch } from '@/app/store'
import { addTask, toggleTask } from '@/features/tasks/tasksSlice'

function TaskList() {
  const tasks = useSelector((state: RootState) => state.tasks.tasks)
  const dispatch = useDispatch<AppDispatch>()

  const handleAddTask = () => {
    dispatch(addTask({
      id: Date.now().toString(),
      title: '新任务',
      completed: false
    }))
  }

  return (
    <div>
      <button onClick={handleAddTask}>添加任务</button>
      <ul>
        {tasks.map(task => (
          <li
            key={task.id}
            onClick={() => dispatch(toggleTask(task.id))}
            style={{ textDecoration: task.completed ? 'line-through' : 'none' }}
          >
            {task.title}
          </li>
        ))}
      </ul>
    </div>
  )
}

状态管理最佳实践

1. 状态分层

typescript
// 本地状态 - 仅在组件内使用
const [isOpen, setIsOpen] = useState(false)

// 应用状态 - 跨组件共享
const { user } = useUserStore()

// 服务端状态 - 从 API 获取
const { data, isLoading } = useQuery(...)

2. 性能优化

typescript
// 只选择需要的状态
const user = useUserStore((state) => state.user)

// 使用 shallow 比较
import { shallow } from 'zustand/shallow'
const { user, theme } = useUserStore(
  (state) => ({ user: state.user, theme: state.theme }),
  shallow
)

实战案例：任务管理应用

创建 Store

typescript
// src/store/taskStore.ts
import { create } from 'zustand'
import { persist } from 'zustand/middleware'

interface Task {
  id: string
  title: string
  description?: string
  completed: boolean
  priority: 'low' | 'medium' | 'high'
  createdAt: Date
}

interface TaskStore {
  tasks: Task[]
  addTask: (task: Omit<Task, 'id' | 'createdAt'>) => void
  toggleTask: (id: string) => void
  deleteTask: (id: string) => void
  getTasksByPriority: (priority: Task['priority']) => Task[]
}

export const useTaskStore = create<TaskStore>()(
  persist(
    (set, get) => ({
      tasks: [],
      addTask: (task) =>
        set((state) => ({
          tasks: [
            ...state.tasks,
            { ...task, id: Date.now().toString(), createdAt: new Date() }
          ]
        })),
      toggleTask: (id) =>
        set((state) => ({
          tasks: state.tasks.map((task) =>
            task.id === id ? { ...task, completed: !task.completed } : task
          )
        })),
      deleteTask: (id) =>
        set((state) => ({
          tasks: state.tasks.filter((task) => task.id !== id)
        })),
      getTasksByPriority: (priority) => {
        const state = get()
        return state.tasks.filter((task) => task.priority === priority)
      }
    }),
    { name: 'task-store' }
  )
)

使用 Store

typescript
import { useTaskStore } from '@/store/taskStore'

function TaskManager() {
  const tasks = useTaskStore((state) => state.tasks)
  const addTask = useTaskStore((state) => state.addTask)
  const toggleTask = useTaskStore((state) => state.toggleTask)
  const deleteTask = useTaskStore((state) => state.deleteTask)

  const handleAdd = () => {
    addTask({
      title: '新任务',
      priority: 'medium',
      completed: false
    })
  }

  return (
    <div>
      <button onClick={handleAdd}>添加任务</button>
      <ul>
        {tasks.map((task) => (
          <li key={task.id}>
            <input
              type="checkbox"
              checked={task.completed}
              onChange={() => toggleTask(task.id)}
            />
            <span style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
              {task.title}
            </span>
            <span className={`priority-${task.priority}`}>{task.priority}</span>
            <button onClick={() => deleteTask(task.id)}>删除</button>
          </li>
        ))}
      </ul>
    </div>
  )
}

常见问题

Q: 什么时候用 Context，什么时候用 Zustand？

帮我选择合适的状态管理方案

Q: 如何处理异步状态？

帮我使用 TanStack Query

Q: 如何优化重渲染？

帮我优化状态选择器

下一步

掌握了状态管理后，接下来可以学习：

  • Claude Code 性能优化 - 应用性能调优
  • Claude Code 测试 - 状态逻辑测试
  • Claude Code 架构 - 应用架构设计

状态是应用的核心

好的状态管理让应用更易维护。Claude Code 可以帮助你设计清晰的状态架构，让开发更高效！