Apollo 客户端缓存与 Redux

Posted 2023-03-08

【中文标题】Apollo 客户端缓存与 Redux

【英文标题】：Apollo Client Cache vs. Redux

【发布时间】：2020-11-03 06:07:05

【问题描述】：

我正在尝试从 Redux Store 迁移到使用 Apollo Graphql Client 附带的 Apollo Client Cache。

将 Apollo Client 与其他数据管理解决方案区分开来的关键特性之一是其标准化缓存。只需设置 Apollo 客户端，您就可以获得开箱即用的智能缓存，无需额外配置。

使用 Redux，我们必须根据从副作用接收到的响应编写动作、类型和调度动作，并使用减速器将数据设置在存储中，这由 Apollo 客户端自动完成。

问题：

1) 从 Redux 迁移到 Apollo Client Cache 有什么优势？

2) 在迁移到 Apollo 客户端缓存之前我应该​​担心什么？

【问题讨论】：

您可以同时使用两者，只需将 [增量] 所有数据获取/更新移动到 apollo，稍后/准备好后移动全局应用状态管理

【参考方案1】：

我认为您在这里提出了一个很好的观点：“使用 Redux，我们必须根据从副作用接收到的响应来编写动作、类型和调度动作，并使用减速器将数据设置在存储中，这是由 Apollo 完成的客户端自动。”

对于副作用，Redux 是命令式的，Apollo 是声明式的。声明性代码通常更短，因为您将逻辑委托给库/框架。

---

Daniel Rearden 提出了一个很好的观点，即比较 Redux 和 Apollo 客户端缓存就像是苹果和橘子。这里的苹果和橙子是不同的状态类型，特别是远程和本地状态。不幸的是，Redux 鼓励我们对所有状态一视同仁。

我会利用 Apollo 缓存来处理需要在服务器上检索、更新和变异的状态。我会使用更轻量级的工具，例如 React 的 Context API 来防止道具钻探、全局应用程序状态和业务逻辑挂钩（例如 useReducer/useState）。

棘手的部分是当远程状态和本地/全局应用程序状态混合时。所以我会小心地定义它们如何交互的模式

【参考方案2】：

您将苹果与橙子进行比较。是的，redux 和apollo-client 都为您提供了一种管理全局应用程序状态的方法。但是，redux 允许您创建一个可预测的状态容器，该容器会根据您定义的操作进行更改。这意味着redux 提供：

可预测性。 Reducer 是纯函数 - 给定相同的状态和操作，reducer 将始终产生相同的结果。 可测试性。同样，因为 reducer 只是函数，所以对它们进行单元测试很简单。 可扩展性。因为 redux 强制你以特定的方式组织你的代码，它使你的代码更易于维护。即使您的代码库不断增长，您的代码仍然可以被其他开发人员调试和理解。

Dan Abromov points out several other benefits:

序列化用户操作并将它们与状态快照一起附加到自动错误报告中，以便产品开发人员可以重放它们以重现错误。 通过网络传递操作对象以实现协作环境，而无需对代码的编写方式进行重大更改。 维护撤消历史记录或实施乐观突变，而无需对代码的编写方式进行重大更改。 在开发中的状态历史之间穿梭，并在代码更改时从动作历史中重新评估当前状态，例如 TDD。 为开发工具提供全面的检查和控制功能，以便产品开发人员可以为其应用构建自定义工具。 在重用大部分业务逻辑的同时提供替代 UI。

是的，redux 带有很多样板文件。但是，您、您的应用程序和您的团队都可以从使用它中获得很多好处，而不仅仅是一种管理全局状态的方法。另一方面，如果您看不到 redux 提供的功能的价值，或者认为它们不值得 redux 为您的代码添加的间接性和复杂性，那么请不要使用它。如果您只需要一种管理全局应用程序状态的方法，那么您可以使用 apollo-client 或其他一些库，或者仅使用 Context API 和 useReducer 挂钩来推出您自己的解决方案。

Apollo 客户端使用 @client 指令来管理本地状态非常方便，特别是如果您已经使用该库来查询 GraphQL API。能够轻松地用派生字段装饰查询结果是很整洁的。能够使用相同的 API 来查询您的服务器和查询本地状态是良好的 DX。但是apollo-client 不能替换 redux，因为归根结底，这两个库出于非常不同的原因做了非常不同的事情。

【讨论】：

感谢您的见解。很有帮助

您分享的链接来自 2016 年的一篇文章。旧文章并不代表它没有相关建议。但是，在过去的 4 年中，我们学到了很多关于状态管理的知识。具体来说，每项工作使用一种工具的危险。 Redux 从未被设计为处理远程/异步状态。对于数据获取或 Web 套接字事件等副作用，我认为 Apollo 的缓存可以提供很大帮助。

查看ngxs.io 了解ngrx 的继任者

感谢您的好文章。我从这篇关于 react 中的全局状态管理的文章中得到了很多启发。我有点好奇的是在最后一段，你注意到apollo-client 不能代替redux。我认为我们可以从基于 redux 的应用程序迁移到基于 apollo-client 的应用程序......所以我不确定你的意见。

"redux 允许您创建一个可预测的状态容器，该状态容器会根据您定义的操作进行更改" 实际上，Apollo 的状态容器也会在发生突变时自动更改。只是我的 2 美分。

【参考方案3】：

仅当您的后端允许进行 graphql 调用时，迁移到 apollo 才有意义，我们已将项目从 redux 迁移到 apollo，并且效果非常好。

也阅读此blog，我们决定迁移此博客

【讨论】：

不只是 GRAPHQL 后端 - apollo 客户端可以使用 REST API，apollo 服务器也可以这样做

@xadm 你误会了，我没有说 apollo 客户端“不能”，如果后端使用 REST apis，那么在前端为了使用 apollo 客户端我们必须编写本地解析器，这将是一个开销。在我看来，在这种情况下使用 redux 会更合适。

我的评论是一个补充...... 即使你不能快速适应/包装 REST api，你也可以使用 apollo，它可以是 [许多] 迁移步骤之一 ...不是我的反对意见