Reactql - 使用 graphql 的 react-redux

Posted 2023-03-08

【中文标题】Reactql - 使用 graphql 的 react-redux

【英文标题】：Reactql - react-redux with graphql

【发布时间】：2018-06-16 09:25:52

【问题描述】：

我想开始使用 reactql 构建我的新应用。 我真的很喜欢 graphql 和 MERN 堆栈。但是，我最近开始学习 redux 模式。 我的主要痛苦是 - 如何创建使用 graphql 查询获取数据的操作（我主要使用 apollo）。 我的意思是 - 我找到了 REST 模式的示例，但我不知道也找不到任何简单的 reac-redux 应用程序使用 graphql 查询获取数据的示例。

我非常感谢任何示例/帮助/线索。

【参考方案1】：

查看ReactQL auth example 存储库。

它展示了您正在寻找的许多功能，包括在管理用户和会话的上下文中使用 GraphQL 突变“发布”数据，以及使用 GraphQL 查询检索数据。

【讨论】：

好的，我明白了。我一直试图理解 react-redux 和 graphql 的结合，但正如你所建议的那样 - 使用 apollo 制作容器是在没有 redux 模式的情况下管理状态的方法？

【参考方案2】：

不要在应用程序的早期阶段混淆了太多技术。也许 ReactQL 堆栈提供了太多的库？

问题不是如何将 Redux 和 Apollo Client 结合起来进行远程 API 请求，而是如何将它们分开以实现各自的职责。当您在客户端应用程序中使用 Apollo 客户端时，因为您有 GraphQL 后端，请使用 Apollo 作为您的远程状态。然后 Redux（或 MobX/React 的本地状态）仅用于 视图状态（例如弹出切换、搜索字段）。如果您不使用 Apollo Client，则可以将 Redux（使用 redux-saga 或 redux-thunk）用于远程数据。否则，请使用 react-apollo 提供的 Query 和 Mutation 组件将您的远程数据连接到您的 React 层。

如果您的应用程序是纯粹的远程数据驱动并使用 GraphQL 后端，那么 Apollo Client 就足以满足您的应用程序了。

如果您的应用程序中有几个视图状态，请混合使用 React 的本地状态管理。

如果您有多个或多个视图状态，请使用 Redux 或 MobX 作为您的视图状态或尝试 apollo-link-state。