Anyway to submit only changed fields on a form?
Additionally, right now my form passes the entire model to the submit handler, even if the form only uses a couple of fields from that model. Naturally, I can shave my model down after it's returned from the server to be more appropriately sized but it would be nice to be able to simply grab the current field values from the form, rather than the entire model.
Why's this important? Well, our app currently uses a relatively large object in state to populate several components on the page (a couple of status components, a name and headline h1 and h2, a few action buttons that rely on this object for their state/visibility etc.). Rather than duplicate parts of that object over our state tree, it would be helpful for our form to directly address it. So when the user updates the "name" or "headline" fields in the form, we only have to dispatch an action to update that object and not the original one plus the cut down one being used in the form.
Edit:
Summary of requested enhancements:
That would make for a good enhancement! I'll add it after releasing V1.
To avoid adding too much bloat to the library, I feel that this is better solved in userland. Here's the general strategy:
onSubmit, you can check the diff:function getDiff(previousValues, currentValues) {
// either implement this yourself
// or use a library
}
handleSubmit(values) {
const { lastSubmittedValues = {} } = this.state;
const diff = getDiff(lastSubmittedValues, values);
const promise = myAPI.patch('user', diff); // some promise
this.props.dispatch(actions.submit('user', promise));
}
The reason for this is that a proper object/array diffing implementation can be significantly verbose and/or opinionated (think: shallow vs. deep nth-level vs. recursive diffs, array order matters/doesn't matter, etc.).
Most helpful comment
That would make for a good enhancement! I'll add it after releasing V1.