Javascript React-Redux设计方法-用于可编辑文本字段双向绑定的Redux操作或本地函数

你好

我已经阅读了许多SO帖子，这些帖子有助于解决我的问题，但我仍然没有找到任何具体信息，说明我所面临的以下情况是否有既定的解决方法：

我有一个应用程序，允许用户：

添加一个图形；或

编辑现有图形

单击“添加图形”按钮或“编辑图形”按钮时，侧抽屉打开。x轴标签、y轴标签和图表标题的字段为空（对于案例（1））或已填充字段（对于案例（2））。字段本身是可编辑的文本输入字段

当前，当添加一个图形时，我为该图形创建一个UUID，然后用户可以在字段中输入文本，然后单击save。单击“保存”时，将调度一个Redux操作以保存Redux存储中字段的内容。双向是文本字段值和最初包含这些值的本地状态之间的绑定。单击“save”（保存）按钮并触发Redux操作后，本地状态将设置为每个字段的空字符串。所以Redux只在我们实际点击save按钮时使用

现在，当选择现有图形时，我将通过mapStateToProps使用Redux状态填充侧抽屉的文本字段。我在文本输入字段和Redux存储之间使用双向绑定，通过包含去抖动的Redux操作来减少触发的操作数。这意味着在编辑字段时，本质上是一个慢速打字机会导致每一个键的笔划都触发一个Redux操作

我不喜欢我们有不同的双向绑定方法，这取决于用户是单击“编辑”还是“添加”。我也不喜欢因为一些简单的事情（比如从一个单词中添加或删除一个字母）而引发如此多的Redux操作

然后我浏览了SO和Redux文档，发现一般人都建议不要通过道具用Redux state初始化local state。我想要做的实际上是将描述字段现有内容的Redux状态（当单击edit时）复制到本地状态，然后在本地状态中进行双向绑定，类似于案例（1）场景。然后，这就消除了快速连续触发的大量重复操作，并且无论单击“添加”还是“编辑”，我都可以使用相同的双向绑定。但在阅读了这些文件之后，这似乎是一个坏主意，因为在出现意外的重新渲染和通过编辑中途重置局部状态的情况下，以及有两个真实来源的情况下

对于已添加的图形，在本地状态下使用双向绑定，对于已编辑的图形，在Redux中使用双向绑定非常容易混淆，并且不能为需要维护此代码库的用户提供干净一致的代码。是否有一个既定的方法来提供这种情况？我想，在社交媒体上编辑帖子与我面临的问题类似

---

我没有提供我的代码，因为它本身不是一个编码问题，而是一个设计问题，我的Redux代码被分割成几个文件。但是如果代码有帮助的话，我很乐意提供它。

首先，好问题。这是一个经常出现的问题，特别是关于Redux如何工作的问题。在我看来，Redux总是强迫人们提出这样一个问题：“这个州应该住在哪里？”。现在，我知道文档确实非常清楚地描述了Redux中应该存在的状态，但是当您开始创建应用程序时，它仍然具有挑战性

对于您的特定问题，我会选择其中一个-要么使用本地状态进行添加和编辑，要么使用Redux进行添加和编辑。就像你说的，在Redux有一个，在本地州有一个，是令人困惑的。就个人而言，如果没有太多的数据和太多的业务逻辑/计算代码，我会使用本地状态。可以使用Redux中的state来设置初始状态，即

mapstatetops

->

useState（）

（如果您正在使用挂钩）。从Redux填充本地状态后，数据到达Redux的唯一其他时间是组件完成对该数据的处理时。我不会担心“意外的重新渲染和在编辑过程中重置本地状态”。如果发生这种情况，您就有一个需要修复的bug，而这不是Redux和将状态传递给组件的错误

---

我希望这有帮助。如果您希望或需要澄清，请随时提问。

感谢您的回复。很高兴知道，由于Redux，意外的重新渲染不应该成为一个问题。应用程序的这一部分使用Redux的原因是，用户可以使用React router浏览几个不同的页面。Redux用于避免在路由时丢失任何状态（我继承了这个）。是否可以在“编辑”按钮回调中将Redux状态加载到本地状态，然后仅在单击“保存”按钮时将本地状态保存到Redux？这样，用户也可以在不覆盖状态的情况下取消编辑是的，这正是您处理状态的方式。最初从Redux加载，允许用户通过本地状态与表单交互。如果这回答了您的问题，请随时将此问题标记为已解决。谢谢的确如此。谢谢