by Pritish Vaidya

通過Pritish Vaidya

如何在React Native中使用Redux Saga監(jiān)視網(wǎng)絡(luò)更改 (How to monitor network changes using Redux Saga in React Native)

為什么要使用Redux Saga監(jiān)視網(wǎng)絡(luò)更改？ (Why should I use Redux Saga to monitor Network Changes?)

Redux Saga is an alternate side effect model for redux apps. It is easier to manage, execute, test and catch errors.

Redux Saga是Redux應(yīng)用程序的替代 副作用模型。 它更易于管理，執(zhí)行，測(cè)試和捕獲錯(cuò)誤。

Rather than implementing the logic to manage the network state in your react component, the side-effects should be handled separately. Redux Saga provides us with eventChannel as an out of the box solution for handling such cases.

與其在您的React組件中實(shí)現(xiàn)管理網(wǎng)絡(luò)狀態(tài)的邏輯，不如單獨(dú)處理這些side-effects 。 Redux Saga為我們提供了eventChannel作為處理此類情況的現(xiàn)成解決方案。

什么是事件頻道？ (What is an Event Channel?)

Redux Saga consists of eventChannels to communicate between external events and sagas as a factory function. The events are from the event sources other than the redux store.

Redux Saga由eventChannels組成，用于在外部事件和sagas之間進(jìn)行通信，作為工廠功能。 這些事件來(lái)自Redux存儲(chǔ)以外的事件源。

Here’s a basic example from the docs:

這是docs中的一個(gè)基本示例：

import { eventChannel } from 'redux-saga'function countdown(secs) {return eventChannel(emitter => {const iv = setInterval(() => {secs -= 1if (secs > 0) {emitter(secs)} else {// this causes the channel to closeemitter(END)}}, 1000);return () => {clearInterval(iv)}}) }

Things to note:

注意事項(xiàng)：

• The first argument of the eventChannel is a listener function.

  eventChannel的第一個(gè)參數(shù)是偵聽器函數(shù)。

• The return method is the unregister listener function.

  返回方法是注銷注冊(cè)偵聽器函數(shù)。

Emitter initializes the listener once after which all the events from the listener are passed to the emitter function by invoking it.

發(fā)射器初始化監(jiān)聽器一次，之后通過調(diào)用它將來(lái)自監(jiān)聽器的所有事件傳遞給發(fā)射器函數(shù) 。

我應(yīng)該如何使用React Native的Network(NetInfo)API連接Redux Saga的事件頻道？ (How should I hook up Redux Saga’s Event Channel with React Native’s Network(NetInfo) API?)

The React Native’s NetInfo isConnected API asynchronously fetches a boolean which determines whether the device is online or offline.

React Native的NetInfo isConnected API異步獲取一個(gè)布爾值 ，該布爾值確定設(shè)備是online還是offline 。

深入研究代碼 (Dive into the code)

First, we need to create a start channel method.

首先，我們需要?jiǎng)?chuàng)建一個(gè)啟動(dòng)通道方法。

import { NetInfo } from "react-native" import { eventChannel} from "redux-saga"function * startChannel() {const channel = eventChannel(listener => {const handleConnectivityChange = (isConnected) => {listener(isConnected);}// Initialise the connectivity listenerNetInfo.isConnected.addEventListener("connectionChange", handleConnectivityChange);// Return the unregister event listener.return () =>NetInfo.isConnected.removeEventListener("connectionChange", handleConnectivityChange);}); }

The next step is to listen for the event changes within the channel.

下一步是偵聽通道內(nèi)的事件更改 。

...while (true) {const connectionInfo = yield take(channel); }...

The final step is to pass a custom action to the channel so that the value can be synced using your action.

最后一步是將自定義操作傳遞到通道，以便可以使用您的操作同步值 。

... function * startChannel(syncActionName) {... while (true) {const connectionInfo = yield take(channel);yield put({type: syncActionName, status: connectionInfo }); }

This channel can be used in our default exported generator by using the call operation.

通過使用調(diào)用操作，可以在我們的默認(rèn)導(dǎo)出生成器中使用此通道 。

export default function* netInfoSaga() {try {yield call(startChannel, 'CONNECTION_STATUS');} catch (e) {console.log(e);} }

The exported generator can then be imported and used as a detached task using spawn/fork operation in our main saga.

然后，可以在我們的主要傳奇中使用生成/叉操作將導(dǎo)出的生成器 導(dǎo)入并用作獨(dú)立任務(wù) 。

用法 (Usage)

The above code has added it as a package react-native-network-status-saga to include some of the more useful and cool parameters.

上面的代碼將其添加為package react-native-network-status-saga以包括一些更有用和更酷的參數(shù)。

Here are the links

這里是鏈接

• GitHub

  的GitHub

• npm

  npm

Thanks for reading. If you liked this article, show your support by clapping this article to share with other people on Medium.

謝謝閱讀。 如果您喜歡這篇文章，請(qǐng)拍一下這篇文章以與Medium上的其他人分享以表示支持。

More of the cool stuff can be found on my StackOverflow and GitHub profiles.

在我的StackOverflow和GitHub個(gè)人資料中可以找到更多有趣的東西。

Follow me on LinkedIn, Medium, Twitter for further update new articles.

在LinkedIn ， Medium和Twitter上關(guān)注我，以獲取更多更新的新文章。

翻譯自: https://www.freecodecamp.org/news/how-to-monitor-network-changes-using-redux-saga-in-react-native-b7b95635ef65/

總結(jié)

以上是生活随笔為你收集整理的如何在React Native中使用Redux Saga监视网络更改的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。