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

Posted 2023-02-22

【中文标题】React-Redux 设计方法 - 可编辑文本字段双向绑定的 Redux 操作或本地函数

【英文标题】：React-Redux design approach - Redux action or local function for two-way binding of editable text field

【发布时间】：2020-03-30 12:18:29

【问题描述】：

早安，

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

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

添加图表；或 编辑现有图表

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

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

Now, when an existing graph is selected, I populate the text fields of the side-drawer with the Redux state via mapStateToProps.我使用文本输入字段和 Redux 存储之间的两种方式绑定，通过结合 debounce 的 Redux 操作来尝试减少触发的操作数量。这意味着在编辑字段时，基本上慢速打字机会导致每次击键都会触发 Redux 操作。

我不喜欢我们有不同的双向绑定方法，具体取决于用户是单击“编辑”还是“添加”。我也不喜欢因为像在单词中添加或删除字母这样简单的事情而触发这么多 Redux 操作。

然后我浏览了 SO 和 Redux 文档，发现通常人们建议不要通过 props 使用 Redux 状态初始化本地状态。我想要做的实际上是将描述字段的现有内容（单击编辑时）的 Redux 状态复制到本地状态，然后在本地状态下进行双向绑定，类似于我对 Case 所做的（ 1）场景。然后，这消除了快速连续触发的大量 Redux 操作，并且无论单击“添加”还是“编辑”，我都可以使用相同的双向绑定。但在阅读完文档后，如果出现意外的重新渲染并且本地状态在编辑过程中被重置，并且有两个事实来源，这似乎是一个坏主意。

在本地状态中为添加的图和在 Redux 中为编辑的图进行双向绑定非常令人困惑，并且无法为需要维护此代码库的人提供干净一致的代码。是否有既定的方法可以提供这种情况？我想在社交媒体上编辑帖子与我面临的问题类似。

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

【参考方案1】：

首先，好问题。这是一个经常出现的问题，尤其是关于 Redux 的工作原理。在我看来，Redux 一直在强制提出“这个状态应该在哪里？”的问题。现在，我知道文档确实对 Redux 中应该存在的状态给出了非常清晰的描述，但是当您开始创建应用程序时，它仍然具有挑战性。

对于您的特定问题，我会选择其中一个 - 要么使用本地状态进行添加和编辑，要么使用 Redux 进行添加和编辑。就像你说的那样，在 Redux 中拥有一个，在本地状态中拥有一个是令人困惑的。就个人而言，如果没有很多数据，也没有很多业务逻辑/计算代码，我会使用本地状态。可以使用 Redux 中的状态来设置初始状态，即 mapStateToProps -> useState()（如果您使用钩子）。从 Redux 填充本地状态后，数据到达 Redux 的唯一其他时间是当您的组件完成处理该数据时。我不会担心“意外的重新渲染并且本地状态在编辑中途被重置”。如果发生这种情况，您有一个需要修复的错误，这不是 Redux 的错误并将状态传递给组件。

我希望这会有所帮助。如果您想或需要澄清，请随时提出更多问题。

【讨论】：

感谢您的好评。很高兴知道由于 Redux 不应该担心意外的重新渲染。这部分应用使用 Redux 的原因是用户可以使用 React-router 浏览几个不同的页面。 Redux 用于避免在路由时丢失任何状态（我继承了这个）。是否可以在“编辑”按钮回调中将 Redux 状态加载到本地状态，然后仅在单击“保存”按钮时将本地状态保存到 Redux？这样，用户也可以取消他们的编辑，而不会覆盖状态

是的，这正是您可以处理状态的方式。最初从 Redux 加载它，允许用户通过本地状态与表单交互。

如果这回答了您的问题，请随时将此问题标记为已解决。谢谢！

确实如此。谢谢