React Native 状态管理（Redux、Context API 或 Graphql）

Posted 2023-03-08

【中文标题】React Native 状态管理（Redux、Context API 或 Graphql）

【英文标题】：React Native state management (Redux, Context API or Graphql)

【发布时间】：2020-03-29 00:29:06

【问题描述】：

在我了解 React Native 的基础知识并开发了一些组件之后，我对如何在大型应用程序中组织状态管理进行了一些研究，并试图找出那些日子我应该重点学习的内容。起初，我似乎很明显会使用 Redux，但似乎很多人都乐于使用 GraphQL，这使得 Redux 在实现后甚至过时了。现在还有 Context API，我想知道您今天在编写一个与 3rd pty API 进行大量交互的全新 React Native 应用程序时会选择什么。

感谢和问候， 丹尼斯

【参考方案1】：

答案取决于许多不同的因素。在某些情况下，选择一个比另一个更有意义，但最终决定权在你。不过，让我们看一下使用这些选项中的每一个可能有意义的一些场景。

Redux

Redux 最适合需要复杂状态管理和单一事实来源的应用程序。通常，您会将整个应用程序包装在 Redux 提供程序中，以便在此存储更改时整个应用程序的状态也会更改。因此，当您的状态在整个应用程序的许多不同位置使用并且需要对每个组件都可用时，最好使用此方法。一个例子可能是游戏中玩家的行为会影响他们周围的一切。在这里，您可以在玩家受到伤害或升级以增加敌人难度时向 Redux 发送操作。

上下文

上下文（在我看来）比 Redux 更易于使用，并且对于在一组组件之间共享状态很有用。这不一定适用于整个应用程序，尽管在这种情况下它可以并且将有效地成为 Redux 的更简单替代品。相反，Context 用于以下情况：您有深度嵌套的组件，这些组件需要来自父级数层以上的状态，或者用于未相互嵌套但需要相同数据才能协同工作的组件。何时使用上下文的一个示例是设计图像编辑器。您可以将一个图像组件包裹在一个过滤器组件中，该过滤器组件包裹在一个裁剪组件中，该裁剪组件包裹在一个尺寸组件中，并且不希望每次都将道具向下传递到每个级别。因此，您将最顶层包装在提供者中，并让每个嵌套组件成为消费者。您还可以有一个工具栏，可以更改大小、过滤器等，因此它们也将是消费者并会调用提供者传入的函数。您的应用程序的其余部分将有自己的状态，并且不会在此状态更改时更改。

GraphQL

如果您需要从多个不同的 API 或后端服务中提取状态并一次组合这些状态，这将非常有用。这取决于从预先存在的 GraphQL API 获取或设置您自己的以从其他端点提取数据。由于您说您将与许多不同的 3rd 方 API 进行交互，因此您可以设置一个 Apollo 服务器来从中检索数据，或者如果您需要托管 GraphQL 服务，则可以使用 AWS AppSync 和 Lambda 之类的服务。 GraphQL 的美妙之处在于您可以在任何给定时间仅查询您的应用程序所需的确切内容。因此，不是 API 规定客户端可以访问哪些数据，而是客户端告诉 API 它想要什么，然后 GraphQL 以有效的方式获取它。最适合这种状态管理风格的将是博客应用程序。在这里，您需要获取有关作者的信息，并获取他们的所有帖子，并获取他们帖子上的所有 cmets，并获取他们的用户信息，然后获取他们有多少关注者，等等。通常从他们自己的 REST 端点提供数据，您最终会向您的 API 发出数十个（在某些情况下是数百个）请求，并提取大量不必要的数据。使用 GraphQL，您可以以您想要的形状声明您想要的内容，并在一个请求中将其拉入您的应用程序。这将在尝试查看您的 API 是否已全部返回某条数据时为您省去很多麻烦，因此您不必在组件中编写一千个 if/else 语句。只有一个是必要的。然而，与使用 Redux 和 Context 相比，GraphQL 往往更难设置（在我看来）。所以要准备好这里有一个权衡。当人们从 Redux 切换到 GraphQL 时，他们通常会切换到 Apollo 库，以利用他们的本地状态管理和缓存系统。这些在技术上不是 GraphQL 的一部分，而只是 Apollo 提供的不错的附加组件。

以上只是对使用每个选项的优缺点的一般概述。同样，您最终使用哪个（或哪个组合）真正取决于您的应用程序的要求。我的建议是尝试并找出答案。

【讨论】：

非常感谢您的详细解释。我发现以下包似乎正在解决 Context API 中全局状态的目的：npmjs.com/package/react-hooks-global-state

很高兴为您提供帮助。希望你能做出一些很棒的应用

这个谈话似乎也反映了我的问题：youtube.com/watch?v=wUMMUyQtMSg