0

使用 reactjs 构建的前端客户端似乎可以修改数据，但为了使这种修改持续存在，需要将修改存储在后端。但是，与传统的客户端-服务器应用程序不同，在客户端上呈现的数据并非始终来自后端。

例如，使用经典的 To-Do 应用示例，给定初始状态

（伪代码）

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”不一定存在于后端。将这些信息推送回后端以确保性能（客户端不必等待往返更新）和一致性（如果后端更新失败，需要让用户知道）的公认方法是什么并且可以采取某种行动）？

4

2 回答 2

3

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

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

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

于 2015-03-24T01:37:35.573 回答
0

据我了解（但我很可能弄错了，在这种情况下我很高兴得到纠正），受此启发，它有可能：

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

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

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

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

于 2015-03-30T13:43:34.227 回答