Reset for the LocalForm

[justrag]

Just met a scenario where I need to clear LocalForm after submit. How do I do it?

[davidkpiano]

Thinking about an API for this... The tricky part is that we need to have a declarative approach for this, not an imperative one. "Reaching inside" a component to do something imperatively is definitely an anti-pattern, so I don't want to attach ad-hoc instance methods or anything silly like that.

How about something like this?

<LocalForm getDispatch={(dispatch) => this.formDispatch = dispatch}>
  // ...
</LocalForm>

where getDispatch is basically like getRef - it runs once, on componentWillMount.

Then, in your parent component, you can just call:

handleReset() {
  this.formDispatch(actions.reset('local')); // or whatever model you gave to <LocalForm>
}

Does this sound like a good solution?

N.B. The reason I'm okay with this approach is, if we think about this in a functional reactive sense, a LocalForm is not just an Observable but also a PublishSubject (or just a Subject, or Producer), so we can send actions to it and also observe form state changes. (talking in terms of RxJS, if you're familiar).

[justrag]

I'd be happy with just
<LocalForm resetOnSubmit={true}>
:)
but your approach will help to solve many similar problems that are bound to pop up soon.

[davidkpiano]

In the short term, I can actually see resetOnSubmit being a useful property - its use-case is common enough to warrant it being a standalone prop.

[davidkpiano]

Actually, I'm going to go forward with getDispatcher because resetOnSubmit is too ambiguous/opinionated...

• What if the initial state of the form is autofilled values and the form needs to be reset to empty values?
• Should resetting occur at moment when submit is attempted or submit is completed?
• What about resetting if submit fails?

[neerajhiretual]

Is there any example for resetting the localform within code (programatically) ?