reactjs - 在React和Redux中自动保存表单字段

我有一个父组件，它是一种表单，它通过redux通过以下方式连接到商店:

// FormComponent
export default connect(mapStateToProps, mapDispatchToProps)(FormComponent);

在该表单内部，我有一个输入属性列表，这些属性是表单的子组件:

表单组件

名字组件

姓氏组件

地址组件

我需要通过在输入失去焦点时通过传递包含所有属性的JSON对象来进行更新API调用，从而将任何字段中的更改保存到服务器。

API调用类似于:

updatePersonInfo({firstname: 'new name', lastname: 'new name', address: 'new address' });

我的想法是将PersonInfo对象作为prop从Form组件传递到所有子组件。每个子组件将从PersonInfo Prop 更新一个属性，并使用更新的PersonInfo对象调度UPDATE_PERSONINFO操作。
但要做到这一点，我需要将所有子组件都连接到存储:

// FirstNameComponent
export default connect(mapStateToProps, mapDispatchToProps(FirstNameComponent);

// LastNameComponent
export default connect(mapStateToProps, mapDispatchToProps)(LastNameComponent);

// AddressComponent
export default connect(mapStateToProps, mapDispatchToProps)(AddressComponent);

但是我认为出于性能原因我们应该避免使用connect。
另外，我也不相信我需要4个连接器来调用一个 Action 。

处理这种情况的最佳选择是什么？

最佳答案

您可以直接在每个组件中进行API调用，以仅更新相应的属性，因此可以避免使用Redux。
例如。 updatePersonInfo({ firstname: 'new name' })。

您的API端点应为PATCH方法，该方法仅更新有效负载中的字段(在上述示例中，它仅应修改与firstname对应的字段)。