【问题标题】:Why can’t we use GraphQL just with Redux为什么我们不能只在 Redux 中使用 GraphQL
【发布时间】:2018-09-17 23:19:57
【问题描述】:

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

我以前从未使用过 GraphQL,但我想开始一个新项目,但 Apollo 和 Relay 都无法说服我。目前我正在创建一个使用 react 和 redux 以及“老式”rest api 的应用程序。我喜欢 redux 的想法,它将关于我的应用程序的全部信息存储在一个地方。

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

那么为什么我们不能像过去一样使用普通的 rest api 发送查询并将数据放入 redux 存储(也许尝试存储一些关于同步的信息以进行优化)。

对不起,如果我错过了什么,我是新来的,我不是专业人士,这就是为什么我问一些可能比我更有经验的人:)

【问题讨论】:

    标签: reactjs redux graphql apollo relayjs


    【解决方案1】:

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

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

    relay 和 apollo 等库希望拥有他们管理的状态,以便他们可以在很大程度上免除最终用户对数据进行规范化/非规范化和管理缓存(尽可能多地)的责任,同时仍然提供他们在需要时进行低级控制。

    这是一个相当复杂的问题,因为不同的组件可能依赖于部分模型,例如。 NoteSummary 组件可能只需要 titletags 字段,NoteDetails 组件也需要 descriptioncomments

    如果你自己管理 redux 状态,当出现NoteDetails 组件时,你将不得不为以下代码编写代码:

    1. 如果 Redux 树中还没有 Note,请使用 graphql 查询获取所需字段。

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

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

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

    GraphQL 库试图以一种网络高效的方式解决上述所有问题。使用 react-apollo 或中继,您的组件可以声明它需要的所有内容和底层库,将智能地确定要获取的内容和数量。

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

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

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

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


    如上所述,如果您真的想将 redux 与 graphql 一起使用,而不需要像 Relay 这样的任何其他库,您可以直接使用 Apollo client。您可以从组件中分派thunks,然后在您的 thunk 中,您可以直接使用 Apollo 客户端进行 graphql 查询,一旦您收到响应,您可以使用另一个动作分派将该数据放入树中的树中。

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

    【讨论】:

    • 很好的答案。我完全可以理解:GraphQL 在生产中已经有一年多了,我从来没有回头看 redux。如果图书馆可以为我做到这一点,我为什么要担心商店的状态、内容或形状?就在今天,我团队的一位后端工程师说:现在我正在学习 React,GraphQL 完全有意义!
    • 确实是一个深思熟虑的答案。非常感谢:)
    猜你喜欢
    • 2020-08-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多