Почему я должен использовать Redux Saga для отслеживания сетевых изменений?

Redux Saga - это альтернативная побочная модель для приложений redux. Легче управлять, выполнять, тестировать и выявлять ошибки.

Вместо того, чтобы реализовывать логику для управления состоянием сети в вашем реагирующем компоненте, side-effects следует обрабатывать отдельно. Redux Saga предоставляет нам eventChannel как готовое решение для обработки таких случаев.

Что такое канал событий?

Redux Saga состоит из eventChannels для связи между внешними событиями и сагами как фабричная функция. События происходят из источников событий, отличных от хранилища redux.

Вот базовый пример из документации:

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

На заметку:

  • Первый аргумент eventChannel - это функция слушателя.
  • Метод возврата - функция отменить регистрацию прослушивателя.

Эмиттер инициализирует слушателя один раз, после чего все события от слушателя передаются функции эмиттера путем ее вызова.

Как мне подключить канал событий Redux Saga к API сети React Native (NetInfo)?

NetInfo isConnected API React Native асинхронно извлекает логическое, которое определяет, является ли устройство online или offline.

Погрузитесь в код

Во-первых, нам нужно создать метод начального канала.

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

Следующим шагом является прослушивание изменений событий в канале.

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

Последний шаг - передать настраиваемое действие в канал, чтобы значение можно было синхронизировать с вашим действием.

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

Этот канал можно использовать в нашем экспортируемом генераторе по умолчанию с помощью операции call.

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

экспортированный генератор затем можно импортировать и использовать как отдельную задачу, используя операцию spawn / fork в нашей основной саге.

использование

Приведенный выше код добавил его как пакет react-native-network-status-saga, чтобы включить некоторые из наиболее полезных и интересных параметров.

Вот ссылки

Спасибо за чтение. Если вам понравилась эта статья, покажите свою поддержку, хлопнув в ладоши, чтобы поделиться с другими людьми на Medium.

Больше интересных вещей можно найти в моих профилях StackOverflow и GitHub.

Подпишитесь на меня в LinkedIn, Medium, Twitter, чтобы получать обновления для новых статей.