使用reactjs客户端时更新后端服务器的常用方法有哪些？

Question

使用reactjs构建的前端客户端似乎可以修改数据，但为了使这些修改保持不变，修改需要存储在后端。但是，与传统的客户端 - 服务器应用程序不同，客户端上呈现的数据始终不是从后端派生的。

例如，使用经典的待办事项应用示例，给定初始状态

（伪码）

To Do List
* Task 1
<input> Add your new task here </input>
<button> Add Task</button>

当用户添加新任务时，客户端会更新任务列表

To Do List
* Task 1
* Task 2
<input> Add your new task here </input>
<button> Add Task </button>

但是，新添加的任务“任务2”不一定存在于后端。为了确保性能（客户端不必等待往返更新）和一致性（如果后端更新失败，用户需要了解用户），将此信息推送回后端的接受方法是什么？并且可以采取某种行动）？

Answer 1

我认为可能最有帮助的搜索词是“乐观的更新”。基本上，您需要记录服务器的请求（例如，“将'买土豆'添加到任务列表中”）以及该请求是否已成功（成功或失败）。我看到你在Flux下标记了这个问题，所以你可能正在构建一个Flux Store来处理API请求。

我听到的一种模式是为Todo项目构建一个Store，它有两个内部数据存储区域，一个用于确认数据，另一个用于乐观更新。负责向React组件提供数据的方法构建了一个表示，它将确认的数据与更新队列相结合。

当请求成功，失败或超时时，表示此结果的操作将发送到项目存储。如果请求成功，则可以将相应的项目添加到已确认的数据中;如果出现错误，则可以将其从乐观更新队列中删除（希望还向用户发送一些有用的信号。）

Answer 2

根据我的理解（但我很可能会误解，在这种情况下，我很高兴能够得到纠正），受到this的启发，这是一种可能性：

• 在客户端添加任务时的操作
• 通过在模型
中创建“待处理”，仅客户端实体来对此操作做出反应的商店
• 实际尝试在服务器上创建对象的API方法;
• 如果一切顺利，将创建一个动作以确认该项目已创建
• 商店通过“整合”客户端项目
对此作出反应
• 如果发生错误，则会创建不同的Action（并且商店应该做出相应的反应，可能会将项目标记为“出错”等）。

我发现这是最“干净”的方式。现在我觉得转机有点麻烦：

myAjaxCall().then(function () {
  // everything fine...
} , function () { 
 // some error occured... 
})

创建三个事件，在应用程序的不同部分处理 - 所以任何更好的解决方案都很有趣。