Persist API-Daten in AsyncStorage

Question

Ich möchte die abgerufenen API-Daten (Array) beim erneuten Öffnen einer React Native App ohne Internetverbindung erhalten.

Abrufen und Speichern der Daten im Zustand und AsyncStorage funktioniert gut mit Axios.

Beim Öffnen der App ohne Internetverbindung gibt es eine endlose Ladezeit, ich kann nicht herausfinden, wie man das Fangversprechen auslöst und meine gespeicherten Daten als neue Daten für den Zustand verwendet.

Dies ist mein Code:

componentWillMount(){ 
     axios.get('http://example.com/api_get_request') 
      .then((response) => { 
       console.log('connection ok!'); 
       AsyncStorage.setItem('landen', JSON.stringify(response.data)); 
       this.setState({ 
       landen: response.data, 
       loading: false, 
       }); 
       //DATA SET TO STATE + ASYNCSTORAGE 
      }) 
      .catch(error => { 
      console.log(error.response); 
      AsyncStorage.getItem('landen').then((value) => { 
       this.setState({ 
       landen: JSON.parse(value), 
       loading: false, 
       }); 
       //NO CONNECTION -> ASYNC DATA 
      }); 
      }); 
} 

Answer 1

Sie NetInfo verwenden können Internetverbindung zu überprüfen und wie pro Verbindung Ihren Code ausführen, wie unten.

componentWillMount() { 
    NetInfo.isConnected.fetch().then(isConnected => { 
    if (isConnected) { 
     axios.get('http://example.com/api_get_request') 
     .then((response) => { 
      AsyncStorage.setItem('landen', JSON.stringify(response.data)); 
      this.setState({ 
      landen: response.data, 
      loading: false, 
      }); 
     }) 
    } else { 
     AsyncStorage.getItem('landen').then((value) => { 
     this.setState({ 
      landen: JSON.parse(value), 
      loading: false, 
     }); 
     }); 
    } 
    }); 
} 

Bitte beachten Sie, dass obige Code nicht getestet wird, und Sie können einige Dinge hier und dort befestigen müssen, aber Sie werden das Konzept erhalten. Möglicherweise müssen Sie auch catch Block hinzufügen, um unerwartete Fehler zu erfassen.

Answer 2

Für die Verwaltung einige kleine Informationen ist eine gute Idee, verwenden Sie AsyncStorage. Aber wenn man alle Staaten der App benötigen verwalten, ist es eine gute Praxis Code vorbei zu Redux und Verwendung Bibliotheken wie:

https://github.com/rt2zz/redux-persist
https://github.com/redux-offline/redux-offline