Рубрики
Без рубрики

Интеграция Navigator.Online в React-redux

Захват прослушивателей событий Windows и интегрируя это с redux

Автор оригинала: Dominic Scanlan.

Недавно я работаю над веб-приложением React-redux с требованием, чтобы он все еще работал в автономном режиме. Это первая часть в серии блога о том, что я столкнулся. Я также предполагаю, что вам уже комфортно при создании приложения red-redux.

Захват онлайн/офлайн событие

Большинство Браузеры теперь поддерживают Navigator.online недвижимость, но вы можете проверить здесь Отказ

Чтобы захватить онлайн-статус, мы сначала должны создать слушатель для онлайн и офлайн События, использующие window.addeventListener Отказ В слушателе мы пройдем событие, чтобы прослушать и функцию (обработчик).

window.addEventListener(name, e => { console.log(navigator.onLine); });

В обработчике мы имеем доступ к Navigator.Online, но в настоящее время это не в экосистеме Redux, которая является конечной целью, чтобы мы могли реагировать на это изменение.

Добавление промежуточного программного обеспечения

Чтобы интегрировать эту функциональность в Redux, я буду использовать Redux-Thunk Так что мы можем использовать функции вместо создателей действий. Функции будут отправлены действия, когда наше приложение либо онлайн, либо в автономном режиме. Чтобы включить промежуточное программное обеспечение в Redux, мы будем использовать:

import { createStore, applyMiddleware } from 'redux' const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);

Тогда мы можем создать наш магазин с промежуточным программным обеспечением:

const store = createStoreWithMiddleware(reducers);

Добавление слушателей до отправки

Мы уничтожим window.addeventListener В функции, которая вернет функцию отправки.

function listenToWindowEvent(name, mapEventToAction) { return function (dispatch) { function handleEvent(e) { dispatch(mapEventToAction(e)); } window.addEventListener(name, handleEvent); } }

Здесь у нас есть функция, которая принимает имя события для прослушивания и именованной функции для отправки действия.

function navigatorOnLine(e) { return { type: 'WEB_APP_ONLINE', payload: navigator.onLine }; }

Когда Навигаторонлайн Срабатывает действие возвращается с типом и Navigator.online значение.

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

Store.Dispatch (ListEntowIndowEvent («Load», NavigatoronLine));

Store.Dispatch (ListEntowIndowEvent (‘Offline’, Navigatoronline));

Store.Dispatch (ListEntowIndowEvent (‘Online’, NavigatoronLine));