9

我正在开发一个使用 redux 进行状态管理的 React 本机应用程序。我想让这个应用程序离线工作并保留所有数据。

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

非常感谢帮助。

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

4

4 回答 4

5

每次我从远程调度一个动作时，我都会用它的首选唯一名称将它保存在 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 });
      });

  };
}
于 2019-04-16T05:50:27.250 回答
4

redux-store 的持久化存储

要将您的 redux-store 存储在持久位置，您可以使用redux-persist library。

React Native 中的网络状态

要使用网络状态，您应该使用NetInfoReact 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
    }
})
于 2019-04-16T05:27:27.790 回答
3

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

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

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

于 2019-04-16T05:49:39.420 回答
0

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

单击此处进行说明

如果您想了解其他存储选项，可以查看下面的链接。

点击这里

于 2019-04-16T05:19:52.603 回答