SuperAPI AI 工具集

nextjs-state-management

前端与建站

查看项目

更新于 10-15 22:13

技能介绍

用途:为 Next.js 应用提供状态管理选型与实现规范,优先级为 P2(中等)。

主要能力与决策指南:可共享或需持久化的状态用 URL 状态(useSearchParams + useRouter);服务器数据用 SWR 或 TanStack Query,不要同步进 useState;复杂客户端 UI 用 Zustand(仅在 'use client' 中)或 Jotai;简单本地状态用 useState,并尽量靠近消费方放置。

用法要点:技能内含 URL 驱动状态、服务器状态(SWR/TanStack Query)、客户端状态(Zustand)的实现示例,以及 references/redux.md、references/zustand.md、references/url-state.md 参考文档。水合安全方面,将 localStorage 读取包在 useEffect 或 mounted 标志中以避免水合不匹配;Next.js 15+ 用 useOptimistic 处理乐观更新。

旧版 Redux(已有项目):若项目已使用 redux@4 + createStore + redux-thunk + next-redux-wrapper,使用 useSelector / useDispatch 钩子,不要用 connect HOC;为所有 selector 与 dispatch 调用定义类型化的 RootState 与 AppDispatch;不要在既有 Redux 代码库上叠加 Zustand 或 TanStack Query,必要时渐进迁移。迁移路径:Redux Toolkit(@reduxjs/toolkit)→ RTK Query → 再考虑 TanStack Query。

反模式:简单状态不用全局 store(用 useState 或 URL 参数,避免为基本 UI 用 Zustand);状态中不放大型对象,拆分为细粒度基础类型以减少额外重渲染;不用 useEffect 做数据获取(服务器状态用 SWR 或 TanStack Query);客户端 store 不放服务器状态(在 RSC 中获取,客户端 store 仅用于 UI 状态)。

限制:资料未提供具体代码内容、版本要求与安装命令。