Храните данные в автономном режиме и синхронизируйте их один раз в сети, используя React Native и Redux store

Question

Я работаю над собственным приложением React, которое использует приставку для управления состоянием. Я хочу, чтобы это приложение работало в автономном режиме и сохраняло все данные.

Как только приложение получит доступ к сети, все данные должны быть синхронизированы с онлайн-базой данных с помощью REST API. Пожалуйста, предложите наилучшие возможные подходы к этому сценарию, так как я новичок в разработке REACT NATIVE / Mobile.

Помощь очень ценится.

Я пытался хранить все данные с помощью API AsyncStorage, но мне трудно управлять всеми данными и не могу понять, как эффективно синхронизировать их с онлайн-базой данных, как только приложение получает доступ к сети.

Answer 1

Каждый раз, когда я отправляю действие с пульта, я сохраняю его в AsyncStorage с его префредным уникальным именем.

Кодовый удар проверит связь для устройства Android, а затем отправит действие при подключении Если мы подключены к интернету, он отправит действие Если нет, он получит данные из AsyncStorage и отправит их в качестве второго параметра для сохранения в виде избыточного состояния.

Компонент, вызывающий действие

 // For Android devices
 if (Platform.OS === "android") {
        NetInfo.isConnected.fetch().then(isConnected => {
          if (isConnected) {
            this.props.dispatch(fetchTasks(tok, null));
         }
          else {
            AsyncStorage.getItem("@Your:Data").then(data => {
          if (data !== null) {
            this.props.dispatch(fetchTasks(token, JSON.parse(data)));
          }}}

Действие

Вы можете видеть, что я делаю со своими данными второго аргумента о действии.

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

  };
}

Answer 2

Если вы хотите хранить большой объем данных, вы можете использовать response-native-sqlite-storage в качестве локальной базы данных.

Это поможет вам сохранить все данные, которые вы хотите сохранить, и когда пользователь подключится к сети, получит все данные из базы данных и синхронизируется с онлайн-базой данных.

Для состояния сети вы можете использовать класс реагирования NetInfo.

Answer 3

Постоянное хранилище для хранилища резервов

Чтобы хранить хранилище резервов в постоянном месте, вы можете использовать библиотеку резервов-резервов .

Состояние сети в React Native

Для работы с состоянием сети вы должны использовать NetInfo вспомогательный класс из React Native

Для проверки состояния сети (онлайн / офлайн) :

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

Для обработки изменения состояния сети :

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

Answer 4

Самый простой способ хранения автономных данных - это использование AsyncStorage . Вы можете сохранить JSON или в виде текста. Как

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

Чтобы получить данные, вы можете следовать ниже процесса:

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

Если вы хотите эффективно управлять сетевым подключением. Вы можете использовать

react-native-offline

Нажмите здесь для объяснения

Если вы хотите узнать о других вариантах хранения, вы можете проверить ниже Ссылка.

Нажмите здесь