React-redux-form: Reset for the LocalForm

Created on 7 Dec 2016  路  5Comments  路  Source: davidkpiano/react-redux-form

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

enhancement

Most helpful comment

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).

All 5 comments

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).

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.

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.

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?

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

Was this page helpful?
0 / 5 - 0 ratings

Related issues

dmitryosipow picture dmitryosipow  路  3Comments

davidkpiano picture davidkpiano  路  4Comments

mrsufgi picture mrsufgi  路  3Comments

stutanne picture stutanne  路  4Comments

CoinGame picture CoinGame  路  3Comments