redux-saga-network-status

Network status detection with server ping and backoff for redux-saga.

Monitors network status using a combination of NavigatorOnLine.onLine, Online and offline events, and pinging a server (with an HTTP GET request). Server pings are retried using a fibonacci backoff interval with a randomization factor to prevent network congestion.

Installation

npm install redux-saga-network-status

Usage

redux-saga-network-status exports its saga by default. Start it as part of your root saga, e.g.

// sagas.js
import watchNetworkStatus from 'redux-saga-network-status';
 
export default function* rootSaga() {
  yield fork(watchNetworkStatus);
  // ... more sagas
}

And connect the reducer to your root reducer:

// reducers.js
import { combineReducers } from 'redux';
import { reducer as network } from 'redux-saga-network-status';
 
export default combineReducers({
  network,
  // ... more reducers
});

// main.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
 
import reducer from './reducers';
import rootSaga from './sagas';
 
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware),
);
 
sagaMiddleware.run(rootSaga);

Then dispatch the startWatchNetworkStatus action to begin monitoring network status using the provided ping URL:

import { actions as networkActions } from 'redux-saga-network-status';
 
class AppContainer extends Component {
  componentWillMount() {
    const { startWatchNetworkStatus } = this.props;
    startWatchNetworkStatus('/api/ping');
  }
 
  render() { /* ... */ }
}
 
export default connect(null, {
  startWatchNetworkStatus: networkActions.startWatchNetworkStatus,
})(AppContainer);

Reducer state

The network reducer we connected above will provide the following state in your store:

// True when we have been online at least once
state.network.hasBeenOnline;
// Whether we have pinged the server at least once
state.network.hasDetectedNetworkStatus;
// Whether the browser is connected to a network
state.network.isNavigatorOnline;
// Whether the server is reachable over the network
state.network.isOnline;
// Whether we are currently pinging the server
state.network.isPinging;
// Number of milliseconds until the next ping attempt
state.network.msUntilNextPing;
// The most recent ping error
state.network.pingError;