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

Question

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

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

非常感谢帮助。

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

Answer 1

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

如果您想了解其他存储选项，您可以在下方查看 Link。

Answer 2

redux-store 的持久存储

要将你的 redux-store 存储在持久的地方，你可以使用 redux-persist library.

React Native 中的网络状态

要使用网络状态，您应该使用来自 React Native

的 NetInfo 帮助程序 class

检查网络状态(online/offline):

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 3

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

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

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

Answer 4

每次我从远程发送一个动作时，我都会将它保存在 AsyncStorage 上，并使用它的首选唯一名称。

代码 blow 将检查 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 });
      });

  };
}

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

Store data offline and sync once online using React Native and Redux store

react-native

redux

offline

redux-offline

redux-store 的持久存储

React Native 中的网络状态