Обнаружение сетевого подключения в приложении React Redux - если он отключен, скрыть компонент от пользователя
Я использую API автозаполнения Google для улучшения ввода адреса в моей форме.
Я использую загрузчик GoogleMapsLoader, который отправляет действие после загрузки:
GoogleMapsLoader.onLoad(function() {
store.dispatch(GoogleActions.loaded());
});
В компоненте React у меня есть следующие входные данные:
if (google.status === 'LOADED') {
inputGoogle = <div>
<label htmlFor={`${group}.google`}>Auto Complete:</label>
<input ref={(el) => this.loadAutocomplete(el)} type="text" />
</div>;
} else {
inputGoogle = '';
}
метод loadAutocomplete (не уверен, что это лучший способ сделать это):
loadAutocomplete(ref) {
if (!this.autocomplete) {
this.search = ref;
this.autocomplete = new google.maps.places.Autocomplete(ref);
this.autocomplete.addListener('place_changed', this.onSelected);
}
},
ОБНОВИТЬ:Используя ответ ниже, я сделал следующее:
const GoogleReducer = (state = initialState, action) => {
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: () => {
return (dispatch) => {
dispatch({
type: 'GOOGLE_LOADED',
});
};
},
onOnline: () => {
return (dispatch) => {
window.addEventListener('online', function() {
dispatch({
type: 'GOOGLE_ONLINE'
});
});
};
},
onOffline: () => {
return (dispatch) => {
window.addEventListener('offline', function() {
dispatch({
type: 'GOOGLE_OFFLINE'
});
});
};
}
};
Компонент Inside React:
if (google.status === 'LOADED' && google.connection === 'ONLINE') {
inputGoogle = <div>
<label htmlFor={`${group}.google`}>Auto Complete:</label>
<input ref={(el) => this.loadAutocomplete(el)} name={`${group}.google`} id={`${group}.google`} type="text" onFocus={this.clearSearch}/>
</div>;
} else {
inputGoogle = <p>Auto Complete not available</p>;
}
Пока работает.