AsyncStorageでAPIデータを維持する

Question

インターネットに接続していない状態でReact Nativeアプリを再度開くときに、取得したAPIデータ（配列）を保持したい。

状態のデータを取得して保存すると、AsyncStorageはAxiosを使ってうまく動作します。

無制限の読み込み時間があるため、キャッチの約束をどのようにトリガーし、保存したデータをその状態の新しいデータとして使用するかわかりません。

これは私のコードです：

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

あなたがインターネット接続を確認するためにNetInfoを使用し、接続ごとに以下のようなコードを実行することができます。

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, 
     }); 
     }); 
    } 
    }); 
} 

コードの上にテストされていない、あなたがここにあるいくつかのことを解決しなければならないかもしれませんが、あなたはコンセプトを取得します、ご注意ください。また、予期しないエラーをキャッチするには、ブロックcatchを追加する必要があります。

Answer 2

いくつかの小さな情報を管理するためには、AsyncStorageを使用することをお勧めします。

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

：あなたはすべてのアプリの状態を管理する必要がある場合でも、それは次のようにReduxのと使用ライブラリにコードを渡すとよいでしょう