logo标签列表

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

reactjsreduxreact-query
60

我目前在不同的项目中使用redux进行状态管理。几天前，我听说了react-query，它也用于状态管理并提供缓存和异步获取功能。我正在尝试弄清这两个库之间的主要区别。 在哪些情况下应该使用react-query，以及何时需要使用redux。

2
你可以同时使用 "," 和 Redux。Redux有RTK-Query，这是React-Query的替代方案。 - mercury
9个回答
81

React-Query是一种专门的库，它为您保存API缓存 - 仅此而已。由于它是专门的，因此它可以很好地完成这项工作，并需要较少的代码。

另一方面，Redux为您提供了工具，可以储存几乎任何东西 - 但您必须编写逻辑。因此，在Redux中，您可以做更多的事情，但可能需要编写使用专门库不必要的代码。

您可以同时使用它们: 在React Query中使用API缓存，在Redux中存储其他全局状态。

话虽如此，官方的Redux Toolkit也随版本1.6一起提供了一个API缓存抽象层RTK Query，具有类似于React Query的功能集，但是总体上具有一些不同的概念 - 您可能还想检查一下它。

2
这是否意味着如果我们正在使用redux-toolkit，就不需要使用react query了？ - Sanan Ali
11
可以，除非你真的想这样做。 - phry
1
RTK查询中心化API调用方式与React Query不同。 - mercury
2
@HossamMaher 是的，它们有不同的实现方式，但你编写的代码量非常相似。至于风格：每次切换库时都很正常 - 每个库都会感觉有点不同，并且强调不同的事情。 - phry
如果要使用Redux，为什么会选择React Query而不是RTK？ - ZenVentzi
@ZenVentzi 个人偏好？使用它们的感觉不同，有人可能更喜欢一种编写代码的风格而不是另一种。 - phry
29

react-query旨在处理存储在远程服务器上的数据。为了访问这些数据，您的应用程序需要使用异步请求。这就是您可能希望处理缓存、加载状态、网络故障等的地方。

这就是react-query的优势所在。

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

这就是redux的优势所在。

2
谢谢，没错，Redux Toolkit 还提供了可以存储服务器端数据并在更新时进行更改的记忆化选择器。 - Sanan Ali
2
很可能！我猜你在谈论RTK Query，动机部分提到了React Query：https://redux-toolkit.js.org/rtk-query/overview#motivation - Laurent
1
但是redux-saga也适用于一些远程服务器上的数据。 - Kid
12

Redux 和 react-query 是两种非常不同的东西: react-query 用于数据同步，Redux 是全局状态管理器。 react-query 用于保持所有应用程序与同一数据库同步，Redux 用于共享应用程序状态的部分，以便所有需要读取该状态的组件都可以访问。

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

2
我知道这些工具是使用不同的方法来解决同一个问题，但是react-query不能让你使用useQuery钩子从另一个组件读取缓存数据吗？我认为在Redux中创建缓存的副本是多余的。 - Oleksandr Fomin
1
@OleksandrFomin是对的。React Query已经有了全局缓存。如果您想要一个正式的方式来存储与HTTP请求无关的资源(即不使用axios)，那么您才会使用Redux。 - Ysrninja
9

React Query 管理服务器状态。其主要功能是在服务器和客户端之间处理函数。

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

因此，它们在不同层面上拥有其独特的作用，两者可以并存。

你能多说一些关于“服务器状态”的内容吗？ - Sanan Ali
5
服务器状态是存储在服务器上的数据，您的应用程序需要在客户端和服务器之间进行交互才能访问此状态。您可能需要缓存、加载状态等功能，这就是 react-query 突出的地方。客户端上的数据是存在于客户端中的数据。例如文本输入框的内容或模态框的状态。您无需处理延迟、缓存、网络错误等问题，但需要处理复杂的因果关系序列。这就是 redux 突出的地方。 - Laurent
8
我们需要区分两种状态：客户端状态和服务器（或远程）状态：
  • 客户端状态包含：
    • 尚未持久化到服务器的本地创建数据。
    • 处理活动路由、选定选项卡、旋转器、分页控件等的UI状态。
  • 服务器状态是与以下所有相关的内容：
    • 远程持久化的数据，需要异步API进行获取和更新
在客户端状态方面，Redux 是管理应用程序状态的绝佳工具。
另一方面，为了管理服务器状态，我们可以使用常规状态管理工具，但它们在处理异步或服务器状态时效果不佳。因此，为了解决这个问题，我们使用React Query。正如其文档所述，React Query 是一个强大的工具，可以用于以下目的：
  • 缓存...（可能是编程中最难做的事情）
  • 将多个请求相同的数据去重为单个请求
  • 后台更新“过时”的数据
  • 知道数据何时“过时”
  • 尽快反映数据的更新
  • 性能优化，如分页和延迟加载数据
  • 管理服务器状态的内存和垃圾收集
  • 用结构共享记忆化查询结果
7
  • React-Query = 服务器状态库（保存/缓存API响应）
  • Redux = 客户端状态库（全局访问的客户端状态应该被存储）。
3

您可以简单地认为：

  • React Query = axios + 缓存逻辑
  • Redux 可以存储同步数据和异步数据

顺便说一下，我现在使用 context 管理同步状态，React Query 管理异步状态。

2

Redux 是一个很好的选择，如果你的应用程序具有复杂的状态管理或者需要在多个组件之间共享状态。

另一方面

React Query 可以用于需要大量数据获取的应用程序。它提供了从 API 获取、缓存和更新数据的功能。

简而言之，我们可以说，如果我们有很多 API 需要处理，并且我们的主要功能是显示来自 API 的数据，则 RQ 是更好的选择。另一方面，如果您需要更多控制和数据操作应用程序的状态，则 Redux 是更好的选择。

2

react-query：

  • 主要关注数据获取/更新/缓存/同步
  • 在应用程序频繁调用 API 时起重要作用
  • 可以更改缓存时间。

redux：

  • 主要关注客户端的状态管理
  • 需要实现主要代码，如存储/动作/减速器
  • 全局状态管理不受时间限制
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接