Question

我有一个待办事项列表应用程序通过调度TodoItem操作创建CREATE_TODO_REQUEST，这会导致中间件向API发出POST请求并使用{{1使用API返回的新创建的CREATE_TODO_SUCCESS。这个TodoItem有一个由我们的数据库分配给它的混乱的十六进制ID（如ToDoItem）。

问题是，有时API可能需要几秒钟才能响应（特别是如果用户处于弱连接状态），所以我希望在使用新的59e52a5ec8dae14f2420a9ef之前乐观地更新我们的应用程序状态。服务器已完成处理。

这种模式变得混乱，因为我的ToDoItem存储中的所有TodoItem都被ID编入索引，并且它们的顺序存储在ID列表中。这些ID是在创建Redux后由API生成的。

ToDoItem

我的问题是，在等待API返回新创建的{ byId: { 59e52a5ec8dae14f2420a9ef: {...}, 59e52a5ec8dae14f2420a434: {...} }, ids: [ '59e52a5ec8dae14f2420a9ef', '59e52a5ec8dae14f2420a434' ] }并使用正确的ID时，我应该为ID分配热切创建的ToDoItem？< / strong>是否存在处理此类情况的既定模式？

我可以使用随机数生成器创建临时ID，并在调度ToDoItem操作时将其替换为真实ID（请参阅下面的示例应用程序状态）。

CREATE_TODO_SUCCESS

但这可能需要一些复杂的逻辑来跟踪哪个临时{ byId: { 59e52a5ec8dae14f2420a9ef: {...}, 59e52a5ec8dae14f2420a434: {...}, "provisional-todo-1": {...} // this is being created on the API rn }, ids: [ '59e52a5ec8dae14f2420a9ef', '59e52a5ec8dae14f2420a434', 'provisional-todo-1' ] }与稍后从服务器返回的实际ToDoItem相关联。此外，还有一些复杂性与确保在临时ToDoItem上发送的操作（标记为完整，编辑，删除）在创建后应用于正确的“真实”ToDoItem相关联。

Answer 1

最简单的答案是创建一个映射到远程id的本地对象。

例如，它可能看起来像这样：

class Todo {
  constructor() {
    this.id = 'local' + Todo.globalId;
    Todo.globalId += 1;
    this.remoteId = null;
  }

  resolve(remoteId) {
    this.remoteId = remoteId;
  }
}
Todo.globalId = 0;

在redux中，您可以存储这些Todo对象，并在内部使用这些对象来跟踪您的状态。然后，当API最终返回值时，您可以设置remoteId。如果出现故障，您可以删除本地对象或者设置标志。

如何在Redux中乐观地创建实体时处理ID？

1 个答案: