Автор оригинала: 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));