Using redux-form, how can I reset the form values from another component?

Question

Here is a demo of my issue: https://stackblitz.com/edit/redux-form-reset-problems

I am using redux-form 7.2.0 and am trying to reset the form values from another component that is not wrapped by the ReduxForm HOC.

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reset } from 'redux-form';

class MoodAnnouncement extends Component {
  constructor(props) {
    super(props);
    this.resetMood = this.resetMood.bind(this, event);
  }

  resetMood(event) {
    event.preventDefault();
    this.props.dispatch(this.props.reset('SearchFiltersForm'));
  }

  render() {
    return (
      <div className="mui-panel">
        <button
          className="mui-btn mui-btn--primary mui-btn--raised"
          disabled={this.props.MoodCheckerForm.values === undefined}
          onClick={this.resetMood}
        >Reset Mood
        </button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    MoodCheckerForm: state.form.MoodCheckerForm,
  };
};

export default connect(mapStateToProps, { reset })(MoodAnnouncement);

When I click the reset mood button that is in another component away from the form, I'm receiving the error this.props.dispatch is not a function, so I assume there is a different way to dispatch the reset action from within the connect HOC.

How can I reset the form values from another component that is using the react-redux connect HOC?

Answer 1

Please see the Remote Submit example.

There are a couple issues.

Your form names do not match. The only reason MoodChecker.resetMood() works is because the reduxForm() HoC binds the form name to reset() when passing in the prop. So the incorrect name passed is actually being ignored.

MoodControls.resetMood() only has to call the bound action creator reset() from the props, making sure to pass in the right form name. When using the connect(mapStateToProps: func, mapDispatchToProps: object) form, the object passed as the second argument is automatically bound to dispatch via bindActionCreators().

class MoodControls extends Component {
  // ...

  resetMood(event) {
    event.preventDefault();
    this.props.reset('MoodCheckerForm');
  }

  render() {
    // ...
  }
}

const mapStateToProps = state => ({
  MoodCheckerForm: state.form.MoodCheckerForm
});

export default connect(mapStateToProps, { reset })(MoodControls)