title: Detect network connection in React Redux app - if offline, hide component from user
body: <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>