使用继电器时如何处理本地状态？

Question

我正在研究基于反应/中继的内容管理系统。用户可以创建和修改存储在服务器上的文章。在将文章保存到服务器之前，我想知道最好的方法是处理文章的修改状态。我可以想出几种不同的方法来解决这个问题：

1）不受控制的输入

我可以使用defaultValue填充输入元素，而不是明确地将状态存储在任何位置。 DOM将用作修改数据的商店。一旦用户点击“保存”，我收集所有字段，读取值并创建变异。

临：

• 没有本地处理状态

魂斗罗：

• 我真的不知道哪些字段已更改，需要通过突变发送所有数据。或者需要一些额外的逻辑来创建差异
• 无法更新视图的其他部分以响应状态更改

2）以本地状态复制：

我可以将修改后的文章保留在react组件的本地状态，并使用受控输入字段来保持同步。

亲：

• 本地州只能更改字段，因此差异很容易
• UI的其他部分可以响应本地状态的变化

魂斗罗：

• 这似乎是一种反模式，因为视图中的数据不是直接来自中继。本地状态和中继道具之间的同步可能是错误的来源

3）服务器是新的本地：

只需为每个单独的更改创建一个变异。使用乐观更新，这也应该提供良好的用户体验。

Pro：

• 接力是数据的唯一真相来源
• 状态已保存在服务器端，因此如果用户意外关闭浏览器，则会有备份

魂斗罗：

• 这需要在服务器端实现更复杂的实现，以处理用户想要丢弃草稿的情况等。
• 触发了许多突变

这是我能想到的三种解决方法，但也许有更好的方法可以解决这个问题。

我已经看到有很多关于如何使用Relay处理本地状态的讨论，并且可能会有一个带有未来版本的Relay的内置解决方案，但我需要一个适用于当前版本的继电器。

Answer 1

如果我错了，请纠正我，但我相信您正在混淆两个问题：您正在讨论存储本地状态的问题，但实际上您担心的是两个人所做的更改相互冲突的问题（例如，其他人正在编辑当前用户正在编辑的同一文章）。我认为这是因为您谈论的是Relay道具更改，只有当您的应用正在主动从服务器获取更新并且有此类更新要获取时，才会发生。

  

这似乎是一种反模式，因为视图中的数据并非直接来自中继。本地状态和中继道具之间的同步可能是错误的来源

除非您这样做，否则中继应用程序不会一直与服务器同步。 Relay查询和传递给组件的prop不会不断更新。如果可能存在冲突，则必须解决该问题，而这不是中继问题，并且存储本地状态的位置也无法解决该问题。

处理冲突的最简单方法是：

• 将选项＃2用于本地状态
• 为每篇文章提供一个自动递增的版本号＃，该版本号是您在下载该文章以进行编辑时获取的
• 需要对文章进行修改，以指定其正在运行的基本版本。服务器应拒绝任何基数不是当前版本的突变。告诉用户有冲突的更改，它们不能在最新版本上运行，并且您不能允许它们保存。

FWIW我从事复杂的中继应用程序工作，我们始终依靠＃2。本地React状态很好，受控输入也很好。它不是反模式，不是Relay或其他。

Answer 2

热门回答：糟糕，我更喜欢＃2解决方案

1。为什么我更喜欢＃2

解决方案＃2是解决方案＃1的高级版本，因此已通过＃1。但是＃1当然是这样，大多数老网站都这样做。

解决方案3将使服务器保持忙碌，这将增加服务器成本，或在业务扩展时减慢用户体验，因此通过了＃3。但是，作为内部系统或一些业务希望减少用户使用的业务，＃3成为不错的选择。

  

如果用户意外关闭浏览器

解决方案2仍然可以使用时间间隔将其内容同步到服务器，当然您已经看过auto save in xx seconds很多次了。或者，您可以使用localstorage，它不会保存跨计算机的内容，但是会保存您的更改的每一位，甚至每个同步滞后时间为零的历史记录。

2。不是反模式

  

本地状态和中继道具之间的同步可能是错误的来源

我应该说，不仅是＃2发生这种情况，如果其他人同时更改了文章

对于＃1，您的修改将被覆盖，并且您永远找不到找到修改内容的线索

对于＃3，您的内容一直在变化，您是否仍可以进行修改？

因此，如果有这种情况，您需要添加版本控制逻辑对吗？如果没有这种情况，那么您的本地状态就是单一事实。