对 React Native App 的离线支持

Question

我希望为 React Native 应用程序添加离线支持。该应用程序当前运行一个由 Postgres 数据库支持的 API。

我已经在使用 NetInfo 来确定用户是否有连接，但我希望了解添加离线功能的最佳方式，用户可以继续更新他们的数据和信息，然后在什么时候同步所有内容他们再次建立联系。

似乎经常推荐 pouchdb/couchdb 解决方案 - 但是，我根本不想更改我的数据库。理想情况下，我希望有某种方法可以在队列中存储 "jobs" 个 API 调用，然后在连接恢复后执行它们。

在 React Native 应用程序上获得此离线功能的最佳方法是什么。

提前致谢！

Answer 1

您可以使用例如redux 一般用于数据存储。假设你有一个 LOAD_POSTS_DATA 动作，一个组件可能会在某个时间点触发你可以使用这样的减速器：

export const LOAD_POSTS_DATA = 'LOAD_POSTS_DATA';
var connected = ... // filled by NetInfo

const initialState = {
  data: [],
};

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case LOAD_POSTS_DATA:
      if (connected) {
        return {
          open: true,
        };  
      } 

      return state;

    default:
      return state;
  }
}

export function load() {
  return {
    type: LOAD_POSTS_DATA,
  };
}

这只会不加载数据，为了延迟你会像这样写第二个减速器：

const CLEAR_QUEUE = 'CLEAR_QUEUE';
import { LOAD_POSTS_DATA } from './otherReducer';
var connected = ... // filled by NetInfo

const initialState = {
  queue: [],
};

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case LOAD_POSTS_DATA:
      if (!connected) {
        var q = state.queue;
        q.push(action);

        return {
          queue: q,
        };  
      } 

      return state;

    case CLEAR_QUEUE:
      return {
        queue: []
      }

    default:
      return state;
  }
}

// needs to be called as soon as you go back only
// requires redux-thunk
export function getOperations() {
  return (dispatch, getState) => {
    const { thisReducer: { queue } } = getState();
    queue.forEach(action => dispatch(action));

    return {
      type: CLEAR_QUEUE,
    };
  };
}

第二个存储每个可延迟的操作（需要从其他 reducer 导入）并使用 redux-thunk 获取操作并在您恢复在线后立即发送它们。

Answer 2

看看领域：https://realm.io，您可以将其用作应用程序上的数据库，然后一旦连接成功就可以同步数据。

对 React Native App 的离线支持

Offline support for React Native App

mobile

ios

react-native