如何在React Native中轻松管理连接状态更新

by Jordy van den Aardweg

通过乔迪·范·登·阿德维格

如何在React Native中轻松管理连接状态更新 (How to easily manage connection status updates in React Native)

Every now and then I like to create and explore technologies I do not have the time for in my daily life as a Freelance Frontend Developer. Lately, I’m exploring React Native and taking a dive in some new tools and APIs.

作为自由职业者前端开发人员，我时不时地喜欢创建和探索我没有时间的技术。 最近，我正在探索React Native，并深入研究一些新工具和API。

But building a native app is a little bit different than building a web app. I recently got into a scenario where the user has no active internet connection.

但是，构建本机应用程序与构建Web应用程序有点不同。 我最近遇到了一个用户没有活动的互联网连接的情况。

How are we going to inform the user our app has limited capabilities then?

那么，我们如何通知用户我们的应用程序功能有限？

When you are building an app requiring network connectivity, then you need proper handling of failing requests. For example, when the user’s internet connection decides to play hide and seek. So our App can inform the user why a request fails or even prevent the request from firing. And even better: show a usable message to our user explaining what is going on, so they can act on that.

当您构建需要网络连接的应用程序时，则需要正确处理失败的请求。 例如，当用户的Internet连接决定玩捉迷藏游戏时。 因此，我们的应用程序可以通知用户请求失败的原因，甚至可以阻止请求被触发。 甚至更好：向用户显示一条有用的消息，说明发生了什么，以便他们可以采取行动。

In other words, we can give some context to our users on why the App can’t do a certain request.

换句话说，我们可以为用户提供一些有关应用程序为什么不能执行特定请求的上下文 。

Redux与上下文API (Redux vs. Context API)

The React Native community provides a NetInfo module to expose information about the user’s network connection, like if it’s online or offline. We need this data to be globally available in our App.

React Native社区提供了一个NetInfo模块来公开有关用户网络连接的信息，例如在线或离线。 我们需要这些数据在我们的应用程序中全局可用。

A general thought would be to use Redux for this. My App already uses Redux, so why not use Redux for it?

一般的想法是为此使用Redux。 我的应用程序已经使用Redux，为什么不使用Redux？

Well, of course, we could. But that requires every component to be hooked into the Redux store if we want to use this connectivity information. Hooking into Redux creates overhead, more lines of code and could make our App more complicated than needed.

好吧，当然可以。 但是，如果我们要使用此连接信息，则需要将每个组件都挂接到Redux存储中。 陷入Redux会产生额外的开销，更多的代码行，并且可能使我们的App变得比所需的更为复杂。

Let’s explore other possibilities…

让我们探索其他可能性……

React’s Context API provides a simpler, cleaner way to share state-like data through our components:

React的Context API提供了一种更简单 ， 更干净的方式来通过我们的组件共享类似状态的数据：

Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. — Source

上下文旨在共享可被视为React组件树的“全局”数据，例如当前经过身份验证的用户，主题或首选语言。 — 来源

Seems like we have a perfect use case to use React’s new Context API!

似乎我们有一个完美的用例来使用React的新Context API！

让我们潜入 (Let’s dive in)

First, we have to install the required packages, since in React Native 0.59 the NetInfo module is in a separate package. React 16.6 or later is also required because it allows the context to be available outside render methods. Pretty useful, as this gives us greater flexibility where we use this context.

首先，我们必须安装所需的软件包，因为在React Native 0.59中， NetInfo模块位于单独的软件包中。 还需要React 16.6或更高版本，因为它允许上下文在render方法之外可用。 非常有用，因为这使我们在使用此上下文时具有更大的灵活性。

I won’t bother you with setting up a React Native app and just assume you already have one.

我不会打扰您设置React Native应用，而只是假设您已经拥有一个。

Let’s install the NetInfo package:

让我们安装NetInfo软件包：

npm install @react-native-community/netinfo --save

Once installed, we can create our components.

安装后，我们可以创建我们的组件。

Creating the Context ProviderLet’s set up the <NetworkProvider> component. This component passes our connectivity status down all our child components:

创建上下文提供程序让我们设置<NetworkProvide r>组件。 此组件将我们的连接状态传递给所有子组件：

As shown above, we just listen for the connectionChange event. That event returns true when there’s an active internet connection or false when the user has no active internet connection. We update the state when the connectivity status changes.

如上所示，我们只监听connectionChange事件。 当存在有效的Internet连接时，该事件返回true当用户没有有效的Internet连接时，则返回false 。 当连接状态更改时，我们会更新状态。

As soon as we update the state, the context in our component tree changes. So every component has access to the updated isConnected value. Similar to Redux, but with way less boilerplate code.

一旦更新状态，组件树中的上下文就会更改。 因此，每个组件都可以访问更新的isConnected值。 与Redux类似，但是样板代码更少。

Wrapping the Context ProviderFor React’s Context API to work, we need to wrap this <NetworkProvider> component we just created around our other components, like so:

包装上下文提供程序为了使React的Context API能够正常工作，我们需要将我们刚刚创建的<NetworkProvide r>组件包装在其他组件周围，如下所示：

By doing this we make the context available in every component inside the <NetworkProvider>.

通过这样做，我们可以在<NetworkProvid er>内部的每个组件中使用context 。

The last step is to use the context in a component. We use a <ExampleComponent> for now:

最后一步是在组件中使用上下文。 我们现在使用<ExampleCompone nt>：

Now our component uses the Context API and this.context.isConnected is available for us to use.

现在，我们的组件使用了Context API， this.context.isConnected供我们使用。

We can now show a message to our users in the <ExampleComponent> when the user’s internet connection is online or offline.

现在，当用户的Internet连接处于联机或脱机状态时，我们可以在<ExampleCompone nt>中向用户显示一条消息。

In previous versions of React, the context was not available outside your render method. Since React 16.6.0 it is available using static contextType as shown in the example above. Using it like this gives us greater flexibility in where we want to use that context inside our components.

在以前的React版本中， context在您的render方法之外不可用。 从React 16.6.0开始 ，可以使用static contextType来使用它，如上面的示例所示。 这样使用它可以为我们提供更大的灵活性，让我们可以在组件内部使用该上下文。

最后的笔记 (A final note)

So, we have shown that the Context API is perfect for setting and using these global values in this use case. The connectivity status is important to have available throughout our whole app, so we can inform our users when an action that requires an active internet connection is going to fail.

因此，我们证明了Context API非常适合在此用例中设置和使用这些全局值。 连接状态对于在整个应用程序中都可用非常重要，因此，当需要有效互联网连接的操作失败时，我们可以通知用户。

We could do the same with Redux, but that requires way more code. Let’s use native React API’s where possible, as it limits dependencies!

我们可以对Redux进行相同的操作，但这需要更多的代码。 让我们尽可能使用本机React API，因为它会限制依赖！

The complete Gist can be found on my GitHub.

完整的Gist可以在我的GitHub上找到 。

谢谢阅读！ (Thanks for reading!)

I’ve been using Medium for quite some years now, but generally was just reading and learning from other people’s content. Tutorials like this helped me a lot during the years. So, writing my own is my way of giving back to this awesome developer community!

我已经使用Medium已有很多年了，但通常只是阅读和学习其他人的内容。 这些年来，这样的教程对我帮助很大。 因此，写自己的书是我回馈这个很棒的开发人员社区的方式！

Did this tutorial help you? Let me know in the comments ?

本教程对您有帮助吗？ 在评论中让我知道吗？

Got feedback for me to improve my articles? I’m eager to improve and share more of my knowledge.

得到我的反馈以改进文章？ 我渴望改善并分享更多我的知识。

翻译自: https://www.freecodecamp.org/news/easily-manage-connection-status-updates-in-react-native-28c9b4b0647f/