reactjs - 为什么我们不能仅将 GraphQL 与 Redux 结合使用

Question

我想知道为什么人们似乎不将 GraphQL 与 Redux 一起使用。

我以前从未使用过 GraphQL，但我想开始一个新项目，但 Apollo 和 Relay 都不能说服我。目前我正在创建一个使用 React 和 Redux 以及“旧时尚”Rest API 的应用程序。我喜欢 redux 的想法，它将有关我的应用程序的全部信息存储在一个地方。

现在，据我了解，Apollo 和 Relay 都做了类似的事情，但它们使用单​​独的存储，并且在这两者中，我们混合逻辑和 View 的程度甚至比仅使用 React 还要多，这两件事(另一个存储和混合代码)好像有点乱。优点是缓存，对吗？

那么为什么我们不能像以前使用普通 REST API 那样发送查询并将数据放入 Redux 存储中(也许尝试存储一些有关同步的信息以进行优化)。

抱歉，如果我错过了一些事情，我是新来的，我不是专业人士，这就是为什么我问一些可能比我有更多经验的人:)

Answer 1

当您有很多相互依赖的实体时，“存储某种有关同步的信息以进行优化”成为一个非常困难的问题。

此外，在大型应用程序中构建客户端状态是一个难题。 Redux 社区中被认为是最佳实践的经验法则是，在组件中插入状态树时，您需要规范化和删除 Redux 状态树中的冗余，并在组件中使用时对其进行反规范化。

像relay和apollo这样的库希望拥有他们管理的状态，这样他们就可以消除对数据进行规范化/非规范化的责任，并在很大程度上从最终用户那里管理缓存(尽可能多)，同时仍然提供当他们需要时，他们会进行低水平的控制。

这是一个相当复杂的问题，因为不同的组件可能依赖于部分模型，例如。 NoteSummary 组件可能只需要 title 和 tags 字段，NoteDetails 组件将需要 description > 和评论。

如果您自己管理 redux 状态，则在出现 NoteDetails 组件时，您将必须编写以下代码:

1. 如果 Redux 树中尚不存在 Note，请使用 graphql 查询获取所需字段。

2. 如果注释已存在，但并非所有必填字段都存在，请为缺失的字段创建一个 graphql 查询，然后通过查询 graphql 服务器来获取它们。

3. 如果注释已存在，并且具有所有必填字段，则只需使用本地版本。

当我们拥有彼此依赖的实体时，或者涉及实时协作或订阅时，这会变得更加复杂。

GraphQL 库尝试以非常网络高效的方式解决上述所有问题。使用react-apollo 或relay 你的组件可以声明它需要什么，底层库将智能地计算出要获取什么以及获取多少。

这在哲学上类似于编写 React 组件的方式:在渲染方法中，你声明最终的组件层次结构应该是什么样子(给定当前状态)，并且库(React)计算出要对 DOM 进行哪些更改。

您应该评估您的用例是否受益于这种网络效率，如果是，您是否愿意投入时间来学习 GraphQL 及其周围的生态系统。

如果一个 redux 存储和一些 ajax 调用足以满足您的用例，那么它可以是一个更简单的设置。

如果您决定全面使用 GraphQL 和 Apollo，您可能根本不希望使用 redux。您可以使用apollo-link-state并使用 graphql 查询和突变管理所有数据(本地或远程)。然后，从组件的角度来看，某些数据是远程的还是本地的就变得无关紧要了。

<小时/>

话虽如此，如果您真的想只是将 redux 与 graphql 一起使用，而不需要任何其他库(例如 Relay)，您可以使用 Apollo client直接地。您可以调度thunks从组件中，然后在 thunk 中，您可以直接使用 Apollo 客户端进行 graphql 查询，一旦收到响应，您可以使用另一个操作调度将该数据放入树中。

如果这听起来更复杂，那是因为它就是如此。