Question

我正在使用Reactux进行状态管理的React本机应用程序。我想使该应用程序脱机工作并保留所有数据。

一旦应用访问网络，所有数据都需要使用REST API同步到在线数据库。请提出解决这种情况的最佳方法，因为我是REACT NATIVE /移动应用程序开发的新手。

不胜感激。

我尝试使用AsyncStorage api存储所有数据，但是我发现管理所有数据非常困难，并且无法弄清楚一旦应用程序获得网络访问权限后如何有效地同步到在线数据库。

Answer 1

如果要存储大量数据，可以将react-native-sqlite-storage包用作本地数据库。

这将帮助您存储所有要保存的数据，并且当用户与网络连接时会从数据库中获取所有数据并与在线数据库同步。

对于网络状态，您可以使用react native的NetInfo类。

Answer 2

每次我从远程调度动作时，都会使用它的首选唯一名称将其保存在AsyncStorage中。

代码打击将检查android设备的连接性，然后在连接时调度操作如果我们连接到互联网，它将派遣行动否则，它将从AsyncStorage获取数据并作为第二个参数发送到操作，以存储为redux状态。

调用操作的组件

 // 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 3

存储离线数据的最简单方法是使用 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

Click Here for Explanation

如果要研究其他存储选项，可以在链接下面进行检查。

Click Here

Answer 4

redux-store的永久存储

要在永久位置存储redux存储，可以使用redux-persist library。

React Native中的网络状态

要使用网络状态，您应该使用React Native中的NetInfo帮助程序类

要检查网络状态（在线/离线）：

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

离线存储数据并使用React Native和Redux存储在线同步一次

4 个答案:

redux-store的永久存储

React Native中的网络状态