TanStack Query 是否取代了 Redux、MobX 或其他全局状态管理器?

好吧,让我们从几个重要的项目开始:

  • TanStack Query 是一个服务器状态库,负责管理服务器和客户端之间的异步操作
  • Redux、MobX、Zustand 等是客户端状态库,可以用于存储异步数据,尽管与 TanStack Query 等工具相比效率较低

考虑到这些要点,简短的回答是 TanStack Query 取代了用于管理客户端状态中缓存数据的样板代码和相关连接,并将其替换为几行代码。

对于绝大多数应用程序而言,在将所有异步代码迁移到 TanStack Query 之后,真正全局可访问的客户端状态通常非常小。

仍然存在一些情况,应用程序可能确实具有大量同步的仅客户端状态(例如可视化设计器或音乐制作应用程序),在这种情况下,您可能仍需要一个客户端状态管理器。在这种情况下,重要的是要注意 TanStack Query 不是本地/客户端状态管理的替代品。但是,您可以将 TanStack Query 与大多数客户端状态管理器一起使用,而不会出现任何问题。

一个刻意设计的例子

这里有一些由全局状态库管理的“全局”状态:

tsx
const globalState = {
  projects,
  teams,
  tasks,
  users,
  themeMode,
  sidebarStatus,
}
const globalState = {
  projects,
  teams,
  tasks,
  users,
  themeMode,
  sidebarStatus,
}

目前,全局状态管理器正在缓存 4 种类型的服务器状态:projectsteamstasksusers。如果我们将这些服务器状态资产移动到 TanStack Query,我们剩余的全局状态将更像这样:

tsx
const globalState = {
  themeMode,
  sidebarStatus,
}
const globalState = {
  themeMode,
  sidebarStatus,
}

这也意味着,通过几次对 useQueryuseMutation 的钩子调用,我们还可以删除用于管理服务器状态的任何样板代码,例如:

  • 连接器
  • 操作创建器
  • 中间件
  • Reducer
  • 加载/错误/结果状态
  • 上下文

删除了所有这些东西之后,您可能会问自己:“为了这个微小的全局状态,继续使用我们的客户端状态管理器值得吗?”

这取决于您!

但 TanStack Query 的作用是明确的。它从您的应用程序中删除了异步连接和样板代码,并将其替换为几行代码。

还等什么,赶快试试吧!