TanStack Query 能否替代 Redux、MobX 或其他全局状态管理器?
我们先明确几个重要前提:
- TanStack Query 是一个服务端状态(server state) 库,负责管理客户端与服务端之间的异步操作
- Redux、MobX、Zustand 等则是客户端状态(client state) 库,它们也可用于存储异步数据,但相比 TanStack Query 这类专用工具,效率通常较低
基于上述前提,简短的回答是:TanStack Query 替换了你在客户端状态中用于管理缓存数据的样板代码及相关胶水逻辑,仅需几行代码即可实现同等功能。
对绝大多数应用而言,将全部异步逻辑迁移至 TanStack Query 后,所剩的真正全局可访问的客户端状态通常极少。
当然,某些场景下应用仍可能拥有大量同步的纯客户端状态(例如可视化设计工具或音乐制作应用),此时你很可能仍需一个客户端状态管理器。需要特别注意的是:TanStack Query 并非本地/客户端状态管理的替代方案。不过,你完全可以将 TanStack Query 与大多数客户端状态管理器无缝共用,毫无冲突。
一个刻意构造的示例
此处我们使用某个全局状态库管理一些“全局”状态:
TypeScript
1const globalState = {2 projects,3 teams,4 tasks,5 users,6 themeMode,7 sidebarStatus,8}目前,该全局状态管理器正在缓存 4 类服务端状态:projects、teams、tasks 和 users。若将这些服务端状态迁移到 TanStack Query,剩余的全局状态将简化为如下形式:
TypeScript
1const globalState = {2 themeMode,3 sidebarStatus,4}这也意味着,只需调用几次 useQuery 和 useMutation Hook,你还能一并移除所有曾用于管理服务端状态的样板代码,例如:
- 连接器(Connectors)
- 动作创建器(Action Creators)
- 中间件(Middlewares)
- Reducer
- 加载中/错误/结果状态(Loading/Error/Result states)
- Context
当上述所有内容都被移除后,你或许会问自己:“为这点微小的全局状态,继续使用客户端状态管理器是否还值得?”
这完全取决于你!
但 TanStack Query 的定位非常清晰:它从你的应用中移除了异步逻辑所需的胶水代码和样板代码,并以寥寥数行代码取而代之。
还在等什么?立刻试试吧!