复杂的乐观更新：如何处理不仅仅是二进制元素

Posted 2023-03-08

【中文标题】复杂的乐观更新：如何处理不仅仅是二进制元素

【英文标题】：Complex Optimistic Updates: How to Handle More Than Just Binary-like Elements

【发布时间】：2021-10-05 07:38:00

【问题描述】：

我想构建一个乐观的用户界面，我可以在其中执行所有 CRUD 操作。例如一个待办事项应用程序，用户可以在其中添加、更新和删除待办事项。

但是，我找不到任何讨论的资源不仅仅是添加项目。例如：

https://redux-toolkit.js.org/rtk-query/usage/optimistic-updates https://www.apollographql.com/docs/react/v2/performance/optimistic-ui/

Other articles 甚至建议不要在服务器响应有两个以上状态（例如成功、失败）时使用乐观更新。

谁能给我指出任何涉及以下一些事情的文档、教程或论文？或者是哪个网站成功实现了这一点？

我在排队请求时遇到的一些问题：

回滚

用户添加待办事项 1 POST 请求 1 已发送 用户进行了大量更改 以下 http 请求已排队等待第一个完成 请求 1 失败 我们回滚到原始状态

用户丢失了他的所有更改????

浪费带宽

用户添加待办事项 1 POST 请求 1 已发送 用户添加待办事项 2 POST 请求 2 已排队 用户删除待办事项 2 删除请求 3 已排队 POST 请求 1 完成 发出 POST 请求 2 已发出删除请求 3

我们不必发送请求 2 和 3 ????

除了对请求进行排队，我还可以对请求进行去抖动并发送事务日志 或者只是后端的当前状态。然后后端可以计算出所需的最少数据库更新。

也许已经有一些这样的差异算法？

【问题讨论】：

为什么不在更改后从服务器重新获取当前值？乐观更新意味着临时假设，被来自服务器的准确数据覆盖。此外，在 RTK-Query 中，回滚是一个补丁，它只会将某些属性更改回来，并且只有当它们具有“补丁后值”时。

文档在哪里提到补丁后值？

他们没有深入了解.undo 功能，但在内部它使用immer patch sets。我不完全确定“旧值”比较tbh。您可以在 Redux Devtools 中查看实际发生的补丁集。

【参考方案1】：

也许我可以从 Google Docs 等协作编辑中获得一些提示：

https://en.wikipedia.org/wiki/Operational_transformation

https://davidwalsh.name/collaborative-editing-javascript-intro-operational-transformation

令人难以置信的可视化：

https://operational-transformation.github.io/