Reactjs 与 redux、Apollo+graphQL答案

【问题标题】：Reactjs with redux, Apollo+graphQLReactjs 与 redux、Apollo+graphQL
【发布时间】：2018-07-31 16:54:25
【问题描述】：

它基于意见的问题。需要一个建议。

在 Reactjs 中，使用 redux 进行状态管理和 API 调用使用 Apollo + GraphQL 是否正确？

【问题讨论】：

【解决方案1】：

您必须区分视图状态（例如搜索字段、弹出窗口、切换）和数据状态（例如远程 API）。而 Apollo 主要用于数据状态，而 Redux/MobX/React 的 Local State 用于视图状态当与 Apollo Client 结合使用时。如果不与 Apollo Client 一起使用，这些解决方案也可以用于远程数据状态。但是，Apollo Client 引入了apollo-link-state，它也可以用于本地视图状态。

如果您的应用程序是纯粹的远程数据驱动并使用 GraphQL 后端，那么 Apollo Client 就足以满足您的应用程序了。
如果您的应用程序中有几个视图状态，请混合使用 React 的本地状态管理。
如果您有多个或多个视图状态，请使用 Redux 或 MobX 作为您的视图状态或尝试 apollo-link-state。

【讨论】：

【解决方案2】：

我推荐 Apollo GraphQl，因为它有很多好处：

消除样板文件 不再有动作创建者、异步处理和请求瀑布。只需通过 GraphQL 查询请求您需要的数据，它就会显示出来。

跨堆栈验证 在部署 API 之前识别它们中的重大更改，并静态验证跨所有前端的数据获取。

了解 API 使用情况 了解如何以逐个字段的粒度使用您的后端。轻松查找和解决性能热点。

消除客户端的复杂性 将计算字段、数据转换和安全逻辑放入您的 API，这样您的前端就不必每次都重新实现它们。

逐步改进您的 API 随时向 GraphQL 添加字段，并在不再需要旧字段时弃用它们。模拟部分或全部 API 并并行构建前端。

提高性能 准确获取您需要的数据，不多也不少。通过堆栈中特定于 GraphQL 的缓存和优化提高性能。

有关更多信息，请阅读 GrapQl Apollo Doc https://www.apollographql.com/docs/

【讨论】：

【解决方案3】：

这当然是可能的，也是很自然的事情。我们使用相同的设置，发现我们不再需要使用 Redux。

我们过去也使用 Redux 来存储我们的 API 响应（数据），但现在 Apollo 为我们管理这些。

所以我们的 Redux 存储现在只用于实际的 UI 状态（例如路由状态、用户对某些视图的偏好、是否启用了某些东西等）。

所有数据现在都由 Apollo 检索并保存在它自己的内部 Redux 存储中，用作缓存。这很有效，并且很好地将 UI 状态与数据状态分开。

【讨论】：