react-native - 排队离线请求然后同步到服务器（redux-saga）

Question

我正在寻找解决以下问题的最佳方法，非常感谢一些帮助。我已经构建了一个 react native 应用程序，它使用 redux-saga 进行状态管理和 redux-persist 来保存离线数据。

问题：离线时，用户需要能够使用本机应用程序创建可以附加多个图像的“帖子”（例如）。然后，一旦他们有互联网连接，他们就需要能够单击同步/上传按钮。此按钮state.offlineQueue.offlineQueueShoud从'cache'变为'sync'

几件事情要考虑；服务器端，我有一个帖子表和一个具有多对一关系的图像表（一个帖子有很多图像），这意味着将图像上传到我需要传递的服务器post_id; 这意味着我必须将它“附加”到服务器的帖子上传到服务器，这样我才能post_id在请求中传递。为了解决这部分问题，我有一个使用临时 uuid 来维护帖子和图像之间关系的功能：

function* postProcessToOfflineQueueSaga (action) {
  try {
    let post = Object.assign({}, action.payload);
    post.uuid = uuid();
    post.uploaded = false;
    const imagesArr = post.images;
    imagesArr.forEach(image => {
      image.uuid = uuid();
      image.postUuid = post.uuid;
    });
    post.imageIds = imagesArr.map(image => image.uuid);
    delete post.images;

    yield put({ type: POST_ADD_TO_OFFLINE_QUEUE, post });
    yield put({ type: IMAGE_ADD_TO_OFFLINE_QUEUE, imagesArr });

  } catch (error) {
    console.log(error)
  }
}

然后将其保存到应用程序状态到两个数组中；帖子和图片。例如

state.offlineQueue.offlinePosts: [
  ...
  {
    id: undefined,
    uuid: "4df64ee5-29ba-4347-ae30-ee3d5602eae4",
    imageIds: [
      "62e11ef4-01f7-4052-a3e4-6cd109392818",
      "2c7065ef-fed9-457f-950a-08d4224516dd",
    ],
    uploaded: false,
  }
  ...
]

state.offlineQueue.offlineImages: [
  ...
  {
    id: undefined,
    uuid: "62e11ef4-01f7-4052-a3e4-6cd109392818",
    postId: undefined,
    postUuid: "4df64ee5-29ba-4347-ae30-ee3d5602eae4",
    uploaded: false,
    uri: "/path/to/file/on/device",
  },
  {
    id: undefined,
    uuid: "2c7065ef-fed9-457f-950a-08d4224516dd",
    postId: undefined,
    postUuid: "4df64ee5-29ba-4347-ae30-ee3d5602eae4",
    uploaded: false,
    uri: "/path/to/file/on/device",
  },
  ...
]

state.offlineQueue.offlineQueueShoud: 'cache' // either 'cache' or 'sync'

那么如何将这些数据发送到服务器呢？我在想的是：

1. 检查“offlineQueueShoud”（如果“缓存”不做任何事情来节省电池？）
2. 如果offlineQueueShoud === 'sync'，首先遍历帖子数组并将每个帖子发送到服务器并使用响应，以便我们可以将 post.id 和 image.postId 设置为服务器生成的 id。
3. 上传所有帖子后，开始一张一张地上传图片，因为我们现在有了正确的帖子 ID。
4. 上传所有帖子和图片后，清除列表。

我看过 redux saga 频道，这是最好的方法吗？如果是这样，我该如何做到这一点，以便offlineQueueShoud === 'cache'它不会耗尽电池，并且如果应用程序关闭/重新打开，则不会丢失数据。抱歉，如果我是菜鸟，我只是年轻:)

PS我什至这样做都是正确的吗？！

标签： react-nativeredux-saga