javascript - redux-form - 仅提交编辑过的字段

Question

在这个例子中，我有一个用于更新用户信息的表单，它是用 React 和 redux-form 6.5 编写的。我是这个堆栈的新手。

渲染表单函数如下:

render() {
    const { handleSubmit } = this.props;        
    return (
      <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
        <Field name="name" component="input" type="text"/>
        <Field name="surname" component="input" type="text"/>
        <button action="submit">Sign in</button>
      </form>
    );

我有 reduxForm 连接:

const extendedComponent = reduxForm({
  form: 'userdetail',
  validate
})(UserDetail);

我有提交处理程序:

 handleFormSubmit(user) {
    // TODO: how can I get only the touched fields?
    this.props.updateUser(user);
  }

我在验证后正确接收了对象用户，我发送了 PUT 调用，一切正常。

但我不喜欢将所有数据都发送到PUT，我希望只将编辑后的数据发送到PUT。 我知道我可以检索 initialValues 并比较所有字段。

还有别的办法吗？我怎样才能只得到触摸的字段？

执行此操作的最佳做​​法是什么？

在我看来，这似乎是一项常见的任务，但我没有找到任何相关信息，所以我假设我完全没有理解这一点。

谢谢大家:)

Answer 1

根据 redux-form 项目的维护者:"That's not a feature of the library" .

在该回复中，他建议自己处理差异或使用预先存在的库，例如 object-diff .

例如像这样:

import diff from 'object-diff'

handleFormSubmit(user, dispatch, props) {
  const { initialValues } = props 
  const changedValues = diff(initialValues, user)
  this.props.updateUser(changedValues);
}