React Native App 的离线支持

Posted 2023-03-31

【中文标题】React Native App 的离线支持

【英文标题】：Offline support for React 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 同步也没有声称可以自动解决所有问题。这不是一条容易的路，但可行。

【参考方案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，您可以将其用作应用程序上的数据库，然后一旦连接，您就可以同步数据。