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

Question

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

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

非常感谢帮助。

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

Answer 1

每次我从远程调度一个 Action 时，我都会用它的首选唯一名称将它保存在 AsyncStorage 上。

Code blow 将检查 android 设备的连接性，然后在连接时调度操作
如果我们连接到互联网，它将发送 Action
如果不是，它将从 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 });
      });

  };
}