如何在React Native中不使用Redux实现离线请求队列同步？

一、自定义本地队列+Mobx 实现（推荐） #

无需依赖第三方库，自己实现更可控，核心步骤如下：

1. 本地持久化队列：用MMKV（性能优先）或AsyncStorage（RN内置）存储待同步任务，每条任务需包含：
   • 请求类型（create/update/delete）
   • 笔记核心数据（ID、内容、修改时间等）
   • 唯一标识（用于去重、重试追踪）
2. 乐观更新Mobx Store：用户离线修改时，直接更新Mobx中的笔记状态，同时生成同步任务加入本地队列。
3. 网络状态监听：用@react-native-community/netinfo监听网络切换，当网络从离线恢复在线时，触发队列执行逻辑。
4. 队列执行与重试：
   • 依次取出队列任务发送请求，成功则移除任务；失败则记录重试次数，超过阈值（如3次）标记为待人工处理，下次网络恢复再尝试
   • 执行时加锁（用本地存储标记），避免多端重复执行队列
5. 冲突处理：若服务器返回数据冲突（如服务器版本比本地更新），弹出提示让用户选择合并、覆盖本地或保留服务器版本，同步更新Mobx Store与队列。

核心代码示例 #

import MMKV from 'react-native-mmkv';
import { observable, action } from 'mobx';

const storage = new MMKV();
const QUEUE_KEY = 'note_sync_queue';
const EXECUTING_LOCK = 'queue_executing';

class SyncQueue {
  @observable queue = [];

  @action
  initQueue() {
    const storedQueue = storage.getString(QUEUE_KEY);
    if (storedQueue) {
      this.queue = JSON.parse(storedQueue);
    }
  }

  @action
  addTask(task) {
    this.queue.push({ ...task, id: Date.now().toString(), retryCount: 0 });
    storage.set(QUEUE_KEY, JSON.stringify(this.queue));
  }

  @action
  removeTask(taskId) {
    this.queue = this.queue.filter(task => task.id !== taskId);
    storage.set(QUEUE_KEY, JSON.stringify(this.queue));
  }

  @action
  async executeQueue() {
    if (this.queue.length === 0) return;
    // 加锁防止重复执行
    const isExecuting = storage.getBoolean(EXECUTING_LOCK);
    if (isExecuting) return;
    storage.set(EXECUTING_LOCK, true);

    for (const task of [...this.queue]) {
      try {
        switch (task.type) {
          case 'create':
            await api.createNote(task.data);
            break;
          case 'update':
            await api.updateNote(task.noteId, task.data);
            break;
          case 'delete':
            await api.deleteNote(task.noteId);
            break;
        }
        this.removeTask(task.id);
      } catch (error) {
        task.retryCount += 1;
        if (task.retryCount >= 3) {
          // 移至失败队列，后续可提示用户手动处理
          storage.set('failed_sync_tasks', JSON.stringify([...storage.getArray('failed_sync_tasks') || [], task]));
          this.removeTask(task.id);
        } else {
          storage.set(QUEUE_KEY, JSON.stringify(this.queue));
        }
        break; // 单次失败后暂停队列，避免批量失败
      }
    }

    storage.set(EXECUTING_LOCK, false);
  }
}

export const syncQueue = new SyncQueue();

二、选用维护活跃的第三方库 #

若不想从零实现，可搭配以下库：

• react-native-background-fetch：支持后台同步触发，需配置iOS Background Fetch与Android WorkManager权限
• mobx-persist：配合Mobx持久化队列状态，避免应用重启后队列丢失
• @react-native-community/netinfo：稳定的网络状态监听工具，替代RN内置NetInfo

三、关键注意事项 #

• 幂等性保障：确保同步任务可重复执行（如用笔记ID+修改时间作为唯一标识），避免服务器数据异常
• 性能优化：优先用MMKV替代AsyncStorage，读写速度更快，适合高频队列操作
• 数据回滚：同步失败时，需提供回滚本地数据或标记冲突的逻辑，避免本地与服务器数据不一致

内容的提问来源于stack exchange，提问作者Vladan Mikic