Question

我希望为React Native应用程序添加脱机支持。该应用程序目前运行由Postgres数据库支持的API。

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

通常建议使用pouchdb / couchdb解决方案 - 但是，我根本不想更改我的数据库。理想情况下，我希望能够以某种方式将API调用的“作业”存储在队列中，然后在恢复连接后执行它们。

在React Native App上获得此脱机功能的最佳方法是什么。

提前致谢！

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,
    };
  };
}

第二个存储每个可延迟的动作（需要从其他减速器导入）并使用redux-thunk来获取动作并在您重新上线后立即发送。

Answer 2

查看领域：https://realm.io，您可以将其用作应用程序中的数据库，然后只要您具有连接，就可以同步数据。

对React Native App的脱机支持

2 个答案: