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

Question

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

1)不受控制的输入

我可以使用填充输入元素,defaultValue而不是显式地存储状态.DOM将用作修改数据的商店.一旦用户点击"保存",我收集所有字段,读取值并创建变异.

优点:

• 没有当地的国家处理

魂斗罗:

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

2)在本地复制:

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

优点:

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

魂斗罗:

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

3)服务器是新的本地:

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

优点:

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

魂斗罗:

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

---

这三种方法可以解决我想到的问题,但也许有更好的方法可以解决这个问题.

我已经看到有很多关于如何使用Relay处理本地状态的讨论,并且可能会有一个内置的解决方案,其中包含Relay的未来版本,但是我需要一个适用于当前版本的解决方案的解决方案中继.

Answer 1

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

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

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

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

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

FWIW 我曾研究过复杂的中继应用程序，并且我们始终依赖#2。本地 React 状态很棒，受控输入也很棒。它不是反模式、中继模式或其他模式。