Detect network connection in React Redux app - if offline, hide component from user
<p>I am using google's autocomplete API to improve address input in my form.</p>

<p>I am using GoogleMapsLoader loader which dispatches action once loaded:</p>

<pre><code>GoogleMapsLoader.onLoad(function() {
    store.dispatch(GoogleActions.loaded());
});
</code></pre>

<p>In React component I have following input:</p>

<pre><code>if (google.status === 'LOADED') {
    inputGoogle = &lt;div&gt;
        &lt;label htmlFor={`${group}.google`}&gt;Auto Complete:&lt;/label&gt;
        &lt;input ref={(el) =&gt; this.loadAutocomplete(el)} type="text" /&gt;
    &lt;/div&gt;;
} else {
    inputGoogle = '';
}
</code></pre>

<p>the loadAutocomplete method (not sure if it is best way of doing that) :</p>

<pre><code>loadAutocomplete(ref) {
    if (!this.autocomplete) {
        this.search = ref;
        this.autocomplete = new google.maps.places.Autocomplete(ref);
        this.autocomplete.addListener('place_changed', this.onSelected);
    }
},
</code></pre>

<h2>UPDATE:</h2>

<p>Using answer below I did following:</p>

<pre><code>const GoogleReducer = (state = initialState, action) =&gt; {
    switch (action.type) {
        case 'GOOGLE_LOADED':
            return Object.assign({}, state, {
                status: 'LOADED',
                connection: 'ONLINE'
            });
        case 'GOOGLE_OFFLINE':
            return Object.assign({}, state, {
                connection: 'OFFLINE'
            });
        case 'GOOGLE_ONLINE':
            return Object.assign({}, state, {
                connection: 'ONLINE'
            });
        default:
            return state;
    }
};

const GoogleActions = {
    loaded: () =&gt; {
        return (dispatch) =&gt; {
            dispatch({
                type: 'GOOGLE_LOADED',
            });
        };
    },
    onOnline: () =&gt; {
        return (dispatch) =&gt; {
            window.addEventListener('online', function() {
                dispatch({
                    type: 'GOOGLE_ONLINE'
                });
            });
        };
    },
    onOffline: () =&gt; {
        return (dispatch) =&gt; {
            window.addEventListener('offline', function() {
                dispatch({
                    type: 'GOOGLE_OFFLINE'
                });
            });
        };
    }
};
</code></pre>

<p>Inside React component:</p>

<pre><code>if (google.status === 'LOADED' &amp;&amp; google.connection === 'ONLINE') {
    inputGoogle = &lt;div&gt;
        &lt;label htmlFor={`${group}.google`}&gt;Auto Complete:&lt;/label&gt;
        &lt;input ref={(el) =&gt; this.loadAutocomplete(el)} name={`${group}.google`} id={`${group}.google`} type="text" onFocus={this.clearSearch}/&gt;
    &lt;/div&gt;;
} else {
    inputGoogle = &lt;p&gt;Auto Complete not available&lt;/p&gt;;
}
</code></pre>

<p>So far works.</p>