使用重新水化的 Redux 存储从 props 初始化状态答案

【问题标题】：Initialize state from props using rehydrated Redux store使用重新水化的 Redux 存储从 props 初始化状态
【发布时间】：2019-01-16 18:20:53
【问题描述】：

在我的应用程序中，我有一个对话框窗口，上面有多个输入字段。我想要做的是将用户的输入保存在组件自己的状态中，并且只有之后，比如说，在对话框的“onClose”内部，使用“dispatch”函数将输入发送到 redux 存储。 p>

这样，对话框组件会将字段数据保持在自己的状态中。我面临的问题是我不确定从 redux 存储中包含的信息重建对话框组件状态的最佳方法是什么。

如果使用 F5 刷新页面或简单地重新加载页面，那么组件将失去其状态并且字段将显示为空白，无论重新水化的 redux 存储仍包含有效输入信息这一事实。

那么问题是，从 props 设置组件状态的最佳方法是什么？此外，它看起来不像是反模式吗？此类任务有哪些常用技术？

一种可能性是将字段值直接设置为“props”中包含的值。但是，这意味着输入字段的每一个微小变化都会导致复制和修改 redux 存储，这是缓慢且低效的。

【问题讨论】：

我认为好的做法是：如果您在 redux 中存储字段 - 使用它，否则您的代码会变得非常复杂。 PS关于缓慢和低效 - 这真的不是真的。写几个字段到 redux 不会影响性能
同意它可能会变得复杂，因此问题。这种方式意味着每次用户在文本字段中输入一个键时，都会在 reducer 中复制 whole 状态。这是一种常见的技术吗？
你不应该更新所有状态，只更新值，所以虚拟 DOM 只会重建改变的 html。您还可以实现将值存储到 localStorage 以防止在 F5 后清除
如果 reducer 的 store 存在不变性约束，我怎么能不更新 store 的所有状态？在 Redux reducer 中，您复制状态，更改给定键，然后将此状态作为新状态返回。您不能直接修改商店，而必须获取它的深层副本并处理副本。
您应该深入了解不变性。更新 reducer.attribute 并不意味着更新所有状态。很容易检查。创建具有两个属性的 reducer。一个组件订阅一个属性，第二个订阅另一个。比尝试只调度一个属性更新，你会看到只有一个组件被更新了

【解决方案1】：

通常从 props 构建状态会使代码复杂很多，您必须在 constructor 和 getDerivedStatesFromProps 中映射 props。

我更喜欢编写基于传递的道具返回值的组件函数。

正如您提到的，它可能会影响性能，要修复它，您可以使用memoize-one library。

【讨论】：