使用React Native和Redux存储离线存储数据,然后在线同步[已关闭]

d5vmydt9  于 2022-11-24  发布在  React
关注(0)|答案(4)|浏览(192)

已关闭。此问题为opinion-based。当前不接受答案。
**想要改进此问题吗?**请更新问题,以便editing this post可以用事实与引用来回答.

2天前关闭。
Improve this question
我正在开发一个React原生应用程序,它使用redux进行状态管理。我想让这个应用程序脱机工作并持久保存所有数据。
一旦应用程序访问网络,所有的数据需要使用REST API同步到在线数据库。请建议最好的可能的方法来处理这个场景,因为我是新的React原生/移动的应用程序开发。
帮了大忙,不胜感激。
我曾尝试使用AsyncStorage API存储所有数据,但我发现很难管理所有数据,而且无法弄清楚一旦应用程序获得网络访问权限,如何高效地同步到在线数据库。

mwngjboj

mwngjboj1#

redux-store的持久性存储

要将redux-store存储在持久性位置,可以使用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
    }
})
brqmpdu1

brqmpdu12#

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

  };
}
bis0qfac

bis0qfac3#

如果你想存储大量的数据,你可以使用react-native-sqlite-storage包作为本地数据库。
这将帮助您存储所有您想要保存的数据,当用户与网络连接时,从数据库中提取所有数据,并与在线数据库同步。
对于网络状态,可使用NetInfo类在本机做出React;

qxsslcnc

qxsslcnc4#

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

相关问题