需要建议从redux商店值初始化组件中的本地状态

Question

我正在使用react / redux实现客户编辑表单页面。我将在componentDidMount方法中获取与客户ID相关的客户详细信息，并将客户相关数据存储在redux存储中。

我想在客户编辑表单页面中将该数据集用作模型，并希望使用我存储在redux存储中的客户数据初始化本地状态。

我想知道，我应该在哪个组件中执行此操作（将redux存储模型设置为本地状态）？在构造函数内部做是否正确？

Answer 1

您也可以在构造函数中执行此操作，但在使用redux时，在商店中设置状态然后从中检索数据将是我建议的解决方案，因为它会更灵活。

如果您在组件中设置状态，即使您的状态发生变化也不想要这种行为，它也会进行不必要的渲染。所以存储将是更好的选择

Answer 2

这取决于你的行为是如何设计的以及这个组件中的本地状态实际上是什么。

当用户更改表单中的输入值时，您是否要立即将这些更改存储在redux存储中？或者您是否要等到他们用按钮确认，或者可能会以一定的间隔自动保存更改？

1. 可以更新用户在表单中的每个按键上的redux存储 - 但是你会激活很多动作。在这种情况下，您根本不需要组件状态，通过mapStateToProps和mapDispatchToProps连接到redux商店的道具就足够了。所有输入都是受控输入。

2. 如果组件在将表单中的更改传播到redux存储之前有一些内部逻辑要运行，则必须在constructor或componentWillReceiveProps中克隆表单。这取决于您的应用程序如何使用CustomerEditForm组件。

   1. 如果您使用constructor，则在用户更改表单时，您将无法从redux存储获取更新。想象一下，另一个用户编辑了同一个客户，但是您的组件不会知道它，因为它不再查看this.props.customerForm。
   2. 如果您正在使用componentWillReceiveProps，则必须处理保持表单与redux商店同步的问题。想象一下，输入customerName并且您最初从this.props.customerForm.customerName得到了它的值。现在，此值可能已在this.state.customerForm.customerName中更改（因为用户对输入进行了更改），但也在nextProps.customerForm.customerName中（因为其他人进行了更改）。现在你必须决定要显示或丢弃的内容。

如果可能的话，我建议使用方案1.并且只保持UI状态处于组件的本地状态（类似“下拉菜单打开”）。