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

我有一个待办事项列表应用程序通过调度CREATE_TODO_REQUEST动作，这会导致中间件做出POST请求的API，并与CREATE_TODO_SUCCESS通过API返回的新创建TodoItem响应创建TodoItem。这ToDoItem有一个混乱的十六进制ID（如59e52a5ec8dae14f2420a9ef）由我们的数据库分配给它。如何在Redux中乐观地创建实体时处理ID？

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

此模式变得混乱，因为我所有的TodoItem都在我的Redux商店中按ID索引，它们的顺序存储在ID列表中。在创建ToDoItem之后，这些ID由API生成。

{ 
    byId: { 
     59e52a5ec8dae14f2420a9ef: {...}, 
     59e52a5ec8dae14f2420a434: {...} 
    }, 
    ids: [ 
     '59e52a5ec8dae14f2420a9ef', 
     '59e52a5ec8dae14f2420a434' 
    ] 
}

我的问题是，我应该怎样分配我的ID急切地创建ToDoItem而我等待API与正确的ID返回新创建ToDoItem？处理这种情况是否存在一个既定模式？

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

{ 
     byId: { 
      59e52a5ec8dae14f2420a9ef: {...}, 
      59e52a5ec8dae14f2420a434: {...}, 
      "provisional-todo-1": {...} // this is being created on the API rn 
     }, 
     ids: [ 
      '59e52a5ec8dae14f2420a9ef', 
      '59e52a5ec8dae14f2420a434', 
      'provisional-todo-1' 
     ] 
    }

但是这可能需要其中的临时ToDoItem与那些后来从服务器返回的实际ToDoItem伴生一些复杂的逻辑保持跟踪。此外，确保在针对临时ToDoItem s（标记为完成，编辑，删除）分派的操作在创建之后应用于正确的“真实”ToDoItems时，存在复杂性。

来源

2017-10-18 Jon Gunter

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

例如，它可能是这个样子：

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

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

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

来源

2017-10-19 00:41:16 AnilRedshift

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

回答

相关问题