Check internet connection from your redux’s state
2 min readOct 7, 2017
I worked with many applications that built with reactjs that in one of them i needed to know the internet is connect or not. I researched and i decided to write a library for react and redux. This is my 5th open-source library:
Installation
npm:
npm install react-redux-internet-connection
yarn:
yarn add react-redux-internet-connection
Config
In your main reducers
import { combineReducers } from 'redux';
import { reducer as internet } from 'react-redux-internet-connection';const rootReducer = combineReducers({
internet
});
export default rootReducer;
And you just need to add ReactReduxInternetConnection
in App.js
import React, { PureComponent } from 'react';
import { ReactReduxInternetConnection } from 'react-redux-internet-connection';class App extends PureComponent { render() {
return (
<div className="App">
<h1>react-internet-connection</h1>
<ReactReduxInternetConnection />
</div>
);
}
}export default App;
Usage
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';// you can access in every where to internet connection :)
@connect(state => ({
connection: state.internet.connection
}), { })export default class Home extends PureComponent {
static propTypes = {
connection: PropTypes.bool,
}; render() {
const { connection } = this.props;
return (
<div>
{connection &&
<h1>connected :)</h1>}
{!connection &&
<h1>disconnected :(</h1>}
</div>
);
}
}