SuperAPI AI 工具集

state-tanstack

数据与分析

查看项目

更新于 10-15 17:21

技能介绍

用途:为 React 应用提供状态管理规范,核心原则是职责分离——Tanstack Query 负责服务端状态(API 数据、缓存响应、后台重新获取),Zustand 负责客户端状态(UI 状态、草稿、本地偏好、临时数据)。黄金法则:不要在 Zustand 中复制服务端数据,服务端数据以 Query 为唯一来源。

主要能力:安装依赖 npm install @tanstack/react-query zustand;提供 QueryProvider 配置(staleTime、gcTime、retry、refetchOnWindowFocus)并接入根布局;查询键工厂约定;基础查询与单条查询 Hook(含 enabled 条件);创建、更新、删除等变更及成功后失效查询;乐观更新(onMutate 快照、onError 回滚、onSettled 重新获取);Zustand 的 UI 状态 store、persist 持久化偏好、草稿编辑状态;选择器避免多余重渲染;按领域拆分 store;URL 与 Zustand 结合的筛选状态;加载与错误状态处理。

使用方式:按资料中的目录结构组织 hooks、stores、lib/query-keys、providers;用选择器订阅所需字段,变更后失效相关查询,查询键使用工厂而非字符串。

适用场景:新项目数据获取搭建、带乐观更新的变更、模态框与筛选等 UI 状态、表单草稿编辑、Tanstack Query 与 Zustand 集成。

限制:资料未提供具体版本要求、性能基准、收费或平台信息;示例基于 Next.js 客户端组件与 fetch,其他框架需自行调整。