如何在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(标记为完成,编辑,删除)分派的操作在创建之后应用于正确的“真实”ToDoItem
s时,存在复杂性。
最简单的答案是创建一个映射到远程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。如果出现故障,您可以删除本地对象或设置一个标志。