React Query 和 Redux 之间的主要区别是什么？

Question

目前我redux在不同的项目中使用状态管理。几天前，我听说react-query它也用于状态管理并提供缓存和异步获取。我试图找出这两个库之间的主要区别。我应该在哪里使用react-query以及在哪些情况下我需要 redux。

Answer 1

react-query旨在处理存储在远程服务器上的数据。要访问此数据，您的应用程序需要使用异步请求。您可能需要在这里处理缓存、加载状态、网络故障等问题。

这就是react-query 的闪光点。

Redux另一端处理客户端的数据。例如，文本输入的内容或模态的状态。您不需要处理与网络相关的问题。但您确实需要处理复杂的因果序列。

这就是 redux 的闪光点

Answer 2

Redux这react-query是两个非常不同的东西：react-query用于数据同步，Redux是全局状态管理器。react-query用于将所有应用程序保持同步到同一个数据库，Redux用于将应用程序状态的一部分共享给需要读取该状态的所有组件。

举个例子：我有一个可以与其他用户聊天的应用程序。我使react-query所有应用程序与用户收到的所有消息保持同步，然后将消息存储在其中，Redux以便在聊天页面和历史聊天页面上显示消息。

Answer 3

React Query 管理服务器状态。它的主要功能是处理Server和Client之间的功能。

Redux 处理客户端状态。Redux 可用于异步存储数据。

因此，它们在不同层面上都有其独特的作用，并且可以同时使用。

Answer 4

我们应该区分两种状态，客户端状态和服务器（或远程）状态：

\n

\n
• 客户端状态包含:\n
  \n
  • 本地创建的尚未持久化到服务器的数据。
  \n
  • 处理活动路由、选定选项卡、微调器、分页控件等的 UI 状态。
  \n
  \n
\n
• 服务器状态是与以下内容相关的所有内容：\n
  \n
  • 数据远程保存，需要异步 API 来获取和更新
  \n
  \n
\n

\n

当涉及到客户端状态时，Redux是一个很棒的管理工具，用于管理 application\xe2\x80\x99s 状态。

\n

另一方面，为了管理服务器状态，我们可以使用常规状态管理工具，但它们不太擅长处理异步或服务器状态。因此，为了解决这个问题，我们使用React Query。正如他们的文档中所述，React 查询是一个很棒的工具：

\n

\n
• 缓存...（可能是编程中最难做的事情）
\n
• 将同一数据的多个请求合并为单个请求
\n
• 在后台更新“过时”数据
\n
• 了解数据何时“过时”
\n
• 尽快反映数据更新
\n
• 性能优化，例如分页和延迟加载数据
\n
• 管理服务器状态的内存和垃圾收集
\n
• 通过结构共享来记忆查询结果
\n

\n

Answer 5

• React-Query = 服务器状态库（保存/缓存 api 响应）
• Redux = 客户端状态库（应存储全局可访问的客户端状态）。

Answer 6

React-query 就是您所说的专用库。它为您保存了一个 api 缓存 - 没有别的。而且由于它是专业的，它可以很好地完成这项工作并且需要更少的代码。

另一方面，Redux 为您提供了几乎可以存储任何内容的工具——但您必须编写逻辑。所以你可以在 Redux 中做更多的事情，但你可能不得不编写专用库不需要的代码。

您可以同时使用它们：反应查询中的 api 缓存，Redux 中的其余全局状态。

也就是说，官方 Redux Toolkit自 1.6 版以来还附带了一个 api 缓存抽象RTK Query，具有与 React Query 类似的功能集，但总体上有一些不同的概念 - 您可能还想查看一下。