Stockez les données hors ligne et synchronisez-les une fois en ligne à l'aide de React Native et Redux Store

Le moyen le plus simple de stocker des données hors connexion consiste à utiliser AsyncStorage . Vous pouvez enregistrer json ou sous forme de texte. Comme

AsyncStorage.getItem('saveitems', (err, result) => {
  console.log(JSON.parse(result));
});

Pour obtenir les données, vous pouvez suivre le processus ci-dessous:

AsyncStorage.setItem('saveitems', JSON.stringify([{id: 1, name: 'test', xyz: ''}]));

Si vous souhaitez gérer efficacement la connexion réseau, vous pouvez utiliser

react-native-offline

Cliquez ici pour obtenir des explications

Si vous souhaitez étudier d'autres options de stockage, vous pouvez vérifier le lien ci-dessous.

Cliquez ici p >

Stockage persistant pour redux-store

Pour stocker votre redux-store dans un emplacement persistant, vous pouvez utiliser bibliothèque redux-persist .

État du réseau dans React Native

Pour travailler avec l'état du réseau, vous devez utiliser la classe d'assistance NetInfo de React Native

Pour vérifier l'état du réseau (en ligne / hors ligne) :

NetInfo.addEventListener('connectionChange', ({type}) => {
    switch (type) {
        case 'none':
        case 'unknown':
            // offline statuses, so do nothing
            return
        default:
            // fetch your data here
    }
})

Pour gérer le changement d'état du réseau :

NetInfo.getConnectionInfo().then(({type}) => {
    switch (type) {
        case 'none':
        case 'unknown':
            // offline status
        default:
            // online status
    }
})

Si vous souhaitez stocker une grande quantité de données, vous pouvez utiliser package react-native-sqlite-storage en tant que base de données locale.

Cela vous aidera à stocker toutes les données que vous souhaitez enregistrer et lorsque l'utilisateur se connecte au réseau, récupère toutes les données de la base de données et se synchronise avec la base de données en ligne.

Pour l'état du réseau, vous pouvez utiliser la classe NetInfo de react native.

Chaque fois que j'envoie une action à distance, je l'enregistre sur AsyncStorage avec son nom unique préféré.

Le coup de code vérifie la connectivité d'un appareil Android, puis envoie l'action une fois connecté Si nous sommes connectés à Internet, il enverra une action Sinon, il obtiendra les données d'AsyncStorage et les enverra à l'action en tant que deuxième paramètre à stocker en tant qu'état redux.

Composant qui appelle l'action

export default function fetchTasks(token, asyncStorageData) {
  if (asyncStorageData !== null) {
    return function(dispatch) {
      dispatch({
        type: FETCH_TASKS_SUCCESSFUL,
        payload: asyncStorageData
      });
    };
  }
  return function(dispatch) {
    axios
      .get(`${api_endpoint}/your/data`, {
        headers: {
          Token: token
        }
      })
      .then(response => {
        dispatch({ type: FETCH_TASKS_SUCCESSFUL, payload: response.data });
        AsyncStorage.setItem(
          "@Your:Data",
          JSON.stringify(response.data)
        );
      })
      .catch(err => {
        dispatch({ type: FETCH_TASKS_ERROR, payload: err });
      });

  };
}