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

Question

我有一个父组件，它是一个表单，它通过 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 属性中的一个属性，并使用更新的 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 个连接器来调用一个操作。

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

Answer 1

您可以直接在每个组件中进行 API 调用，仅更新相应的属性，这样就可以避免 Redux。
例如。 updatePersonInfo({ 名字: '新名字' })。

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