Clear form after redux action succeeds

redux-form clearfields
redux-form reset
redux-form reset field to initial value
redux-form clear fields example
redux-form remove field value
react-final-form reset
react-final-form reset field
redux-form clear submit errors

I'm storing my form inputs in React component state. When I submit the form, I trigger a Redux action. And when this action succeeds, I want to update the state again - to clear the form. But how to do it?

I mean, I can easily store form state in Redux too and everything will be resolved, but I'd prefer to store component specific things in component state.

You should be using something like redux-thunk to delay the dispatching until the API call succeeds:

const postForm = data => dispatch => fetch(...).then((...) => dispatch(...))

Since fetch returns a Promise, you can then wait until it's resolved (api call succeeded) before performing the form clearing in your component:

props.postForm(...)
  .then(() => this.setState(<clear the form state>))
  .catch(<do something to warn the user api call failed?>)

Clear form after redux action succeeds, You should be using something like redux-thunk to delay the dispatching until the API call succeeds: const postForm = data => dispatch  B) Simply unmount your form component # For many use cases, you will want to either hide your form component after submission succeeds or navigate away to another page, which will cause redux-form's default behavior of destroying the form data in the reducer in componentWillUnmount.

What does that action update on the state exactly?

One way would be to add an extra case in your componentWillReceiveProps that handle that update of the form. If the action let say updates the list, you could have something like the following on your componentWillReceiveProps method inside you component:

componentWillReceiveProps(nextProps) {
  if (nextProps.list !== this.props.list) {
    this.setState({
      formFields: this.getNewClearFormFields()
    })
  }
}

Reset form after form submission succeed · Issue #21 · final-form , I was wondering how i can reset my form on successful submit ? de facto is just setSubmitError action, so why not to add other actions, like reset . For instance, when you use redux-saga instead of redux-thunk, you wont  When I submit the form, I trigger a Redux action. And when this action succeeds, I want to update the state again - to clear the form. But how to do it? I mean, I can easily store form state in Redux too and everything will be resolved, but I'd prefer to store component specific things in component state.

If you want to update the state after redux action succeeds, then I would suggest go ahead and put it in componentWillReceiveProps by comparing prevState and nextState

use mapStateToProps() to map redux state to component and then update the component state like below

 componentWillReceiveProps(nextProps) {
    this.setState({
      ...
    });
  }

How to reset form With Redux-Form? : reactjs, Anyways, got a problem with trying to reset the fields for redux form: but I'd like to reset the form fields and add some kind of 'success' message on successful actions'; class Contact extends Component { renderField(field) { const { meta:  How to reset initial value in redux form. Ask Question Asked 3 years ago. You can see it in action on the "Clear Values" button in the Simple Example.

action creators · React Redux Form, The action thunk creators require redux-thunk middleware to work, as they use thunks to get the current model state. Also, all action To reset just the field state (in the form reducer), use actions. Notes. If possible, RRF will actually call .​focus() on the DOM node if it is focusable. If the promise fails, the action will: set . I am using Redux for state management. How do I reset the store to its initial state? For example, let’s say I have two user accounts (u1 and u2). Imagine the following sequence of events: User u

How to clear some fields in form - Redux-Form - reactjs - html, B) Simply unmount your form component C) You can call this.props.resetForm() from inside your form after your submission succeeds. D) You can dispatch  If you are using controlled form fields, you may have to explicitly reset each component inside your form, depending on how your values are stored in the state. If they are declared individually, you need to reset each one explicitly: cancelCourse = => { this.setState({ inputVal_1: "", inputVal_2: "",

Reset an input field after submission, This action contacts a server and after the server response i want to reset the input field. I've implemented a number of solutions (i'm using redux  Below is a list of common problems or questions that people have using redux-form. My submit function isn't being called! Help? Will redux-form work with my custom input component? What's the difference between handleSubmit and onSubmit? How can I clear my form after my submission succeeds? How can I submit my form when the user presses Enter?

Comments
  • do you want to update state as soon as you trigger the action?
  • No, I think its better to wait until the action succeeds @MuraliPrasanth
  • then go ahead and put it in componentWillReceiveProps if previous state and next state are different.
  • This will only work if the affected redux state is connected to the component.