Почему я должен использовать 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, чтобы получать обновления для новых статей.