6.0 KiB
6.0 KiB
TanStack Query 重构总结
概述
本次重构将项目中的状态管理从 Zustand stores 迁移到 TanStack Query,提供了更好的数据获取、缓存和状态管理能力。
重构的组件
1. NewsletterFormCard
- 文件:
src/components/settings/notification/newsletter-form-card.tsx
- 重构内容:
- 使用
useNewsletterStatus
,useSubscribeNewsletter
,useUnsubscribeNewsletter
hooks - 移除了手动的
useState
状态管理 - 使用 TanStack Query 的自动缓存和错误处理
- 使用
2. UsersPageClient
- 文件:
src/components/admin/users-page.tsx
- 重构内容:
- 使用
useUsers
hook 进行数据获取 - 移除了手动的数据获取逻辑和状态管理
- 简化了组件逻辑
- 使用
3. CreditsBalanceCard
- 文件:
src/components/settings/credits/credits-balance-card.tsx
- 重构内容:
- 使用
useCreditStats
hook 获取信用统计信息 - 移除了手动的
fetchCreditStats
函数 - 使用 TanStack Query 的
refetch
功能
- 使用
4. CreditTransactions
- 文件:
src/components/settings/credits/credit-transactions.tsx
- 重构内容:
- 使用
useCreditTransactions
hook 进行分页数据获取 - 移除了手动的数据获取和状态管理
- 简化了组件逻辑
- 使用
5. BillingCard
- 文件:
src/components/settings/billing/billing-card.tsx
- 重构内容:
- 使用
useCurrentPlan
hook 获取支付和订阅信息 - 移除了对
usePayment
hook 的依赖 - 使用 TanStack Query 的自动数据获取
- 使用
6. UserDetailViewer
- 文件:
src/components/admin/user-detail-viewer.tsx
- 重构内容:
- 使用
useBanUser
,useUnbanUser
mutation hooks - 移除了对
useUsersStore
的依赖 - 使用 TanStack Query 的自动缓存失效
- 使用
新增的 Hooks
1. Newsletter Hooks (src/hooks/use-newsletter.ts
)
useNewsletterStatus(email)
- 查询订阅状态useSubscribeNewsletter()
- 订阅 newsletteruseUnsubscribeNewsletter()
- 取消订阅 newsletter
2. Users Hooks (src/hooks/use-users.ts
)
useUsers(pageIndex, pageSize, search, sorting)
- 获取用户列表useBanUser()
- 封禁用户useUnbanUser()
- 解封用户
3. Credits Hooks (src/hooks/use-credits-query.ts
)
useCreditBalance()
- 获取信用余额useConsumeCredits()
- 消费信用useCreditStats()
- 获取信用统计信息useCreditTransactions(pageIndex, pageSize, search, sorting)
- 获取信用交易记录
4. Payment Hooks (src/hooks/use-payment-query.ts
)
useActiveSubscription(userId)
- 获取活跃订阅useLifetimeStatus(userId)
- 获取终身会员状态useCurrentPlan(userId)
- 获取当前计划信息
简化的 Providers
1. PaymentProvider
- 文件:
src/components/layout/payment-provider.tsx
- 状态: 已移除,TanStack Query 自动处理所有支付相关数据获取
2. CreditsProvider
- 文件:
src/components/layout/credits-provider.tsx
- 状态: 已移除,TanStack Query 自动处理所有积分相关数据获取
更新的组件
1. UserButton
- 文件:
src/components/layout/user-button.tsx
- 更新: 移除了
resetState
调用,TanStack Query 自动处理缓存失效
2. UserButtonMobile
- 文件:
src/components/layout/user-button-mobile.tsx
- 更新: 移除了
resetState
调用,TanStack Query 自动处理缓存失效
3. SidebarUser
- 文件:
src/components/dashboard/sidebar-user.tsx
- 更新: 移除了
resetState
调用,TanStack Query 自动处理缓存失效
4. CreditsBalanceButton
- 文件:
src/components/layout/credits-balance-button.tsx
- 更新: 使用
useCreditBalance
替代useCredits
5. CreditsBalanceMenu
- 文件:
src/components/layout/credits-balance-menu.tsx
- 更新: 使用
useCreditBalance
替代useCredits
6. ConsumeCreditCard
- 文件:
src/ai/text/components/consume-credit-card.tsx
- 更新: 使用
useCreditBalance
和useConsumeCredits
替代useCredits
7. UpgradeCard
- 文件:
src/components/dashboard/upgrade-card.tsx
- 更新: 使用
useCurrentPlan
替代usePayment
8. CreditPackages
- 文件:
src/components/settings/credits/credit-packages.tsx
- 更新: 使用
useCurrentPlan
替代usePayment
9. CreditsBalanceCard
- 文件:
src/components/settings/credits/credits-balance-card.tsx
- 更新: 使用
useCurrentPlan
替代usePayment
配置
1. QueryClient 配置
- 文件:
src/lib/query-client.ts
- 配置: 设置了合理的缓存时间和重试策略
2. QueryProvider
- 文件:
src/components/providers/query-provider.tsx
- 功能: 提供 TanStack Query 上下文和开发工具
优势
1. 更好的缓存管理
- 自动缓存数据,减少不必要的网络请求
- 智能的缓存失效策略
- 支持乐观更新
2. 简化的状态管理
- 移除了大量的
useState
和useEffect
- 自动处理加载和错误状态
- 统一的数据获取模式
3. 更好的用户体验
- 自动重试失败的请求
- 后台数据刷新
- 更流畅的加载状态
4. 开发体验提升
- 内置的开发工具支持
- 更好的错误处理
- 类型安全的数据获取
缓存策略
- 用户数据: 30秒缓存,5分钟垃圾回收
- 信用数据: 30秒缓存,5分钟垃圾回收
- 信用统计: 1分钟缓存,10分钟垃圾回收
- 支付数据: 2分钟缓存,5分钟垃圾回收
- 终身状态: 5分钟缓存,10分钟垃圾回收
注意事项
- 所有组件现在都使用 TanStack Query 进行数据获取
- 移除了对 Zustand stores 的依赖(除了必要的全局状态)
- 错误处理现在通过 TanStack Query 统一管理
- 加载状态通过
isLoading
和isPending
属性获取 - 缓存失效通过
invalidateQueries
自动处理 - 完全移除了 PaymentProvider 和 CreditsProvider
- 删除了 use-payment.ts 和 payment-store.ts 文件
测试
- ✅ 所有组件编译通过
- ✅ TypeScript 类型检查通过
- ✅ 构建成功
- ✅ 代码格式化通过