redux-online-status

Online status enhancer for Redux.

yarn add redux-online-status

# or

npm i redux-online-status

Usage

example with react-notification-system-redux.

// store
import { createStore, applyMiddleware, compose } from 'redux'
import createOnlineStatusEnhancer from 'redux-online-status'

const store = createStore(
  rootReducer,
  initialState,
  compose(
    createOnlineStatusEnhancer(),
    applyMiddleware(...middlewares)
  )
)

// reducer
import { combineReducers } from 'redux'
import { reducer as online } from 'redux-online-status'
import { reducer as notifications } from 'react-notification-system-redux'

export default combineReducers({
  online,
  notifications,
})

// container component
import React, { PureComponent } from 'react'
import NotificationSystem, { warning, hide } from 'react-notification-system-redux'
import { connect } from 'react-redux'

@connect(({ notifications, online }) => ({ notifications, online }))
export default class Notifications extends PureComponent {
  componentWillReceiveProps(nextProps) {
    if (this.props.online === true && nextProps.online === false) {
      warning({ uid: 'OFFLINE', message: 'Your computer seems to be offline.', autoDismiss: 0, dismissible: false })
    }
    if (this.props.online === false && nextProps.online === true) {
      hide('OFFLINE')
    }
  }
  render() {
    return <NotificationSystem notifications={this.props.notifications} />
  }
}

License

MIT

© sugarshin