React Native App 的离线支持答案

【问题标题】：Offline support for React Native AppReact Native App 的离线支持
【发布时间】：2016-05-16 04:07:51
【问题描述】：

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

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

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

在 React Native App 上获得此离线功能的最佳方式是什么。

提前致谢！

【问题讨论】：

你用什么来管理你的应用状态？
当前使用 Flux
如果您使用 Redux，则可以使用此库使您的状态离线可用：github.com/rt2zz/redux-persist
@AakashSigdel 这是唯一的方法吗？关于 redux-persist 的文档并不多
然后您可以从 CouchDB 同步实现中获得灵感。基本上，在您的模型中有一个修订机制。每当客户端想要写入时，让它呈现当前版本，并且仅在匹配时允许更新。然后，如果不需要，您将需要编写特定于场景的冲突解决逻辑。甚至 CouchDB 同步也没有声称可以自动解决所有问题。这不是一条容易的路，但可行。

标签： ios mobile react-native

【解决方案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 来获取操作并在您重新上线后立即调度它们。

【讨论】：

我猜如果要执行的队列中没有多少请求，这将顺利进行。此外，如果调度操作导致 UI 发生变化，如通知、动画等，那么您需要在此解决方案之外处理它。

【解决方案2】：

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

【讨论】：