Do partial reset of redux form fields

Question

I have implemented a form using the redux-form library. The form has 3 fields.

1. First Name (input type)
2. Last Name (input type)
3. Favorite Color (select/drop-down type)

What I am trying to implement when a user changes its Favorite Color (drop-down). Only Last Name field get clear, not any other fields of the form (i.e. First name and Favorite Color fields should remain unchanged).

I have already implemented the given requirement, sample code shared below.

Store file config

    const reducer = combineReducers({
      form: reduxFormReducer.plugin({
        mySimpleForm: (state, action) => {
          if(action.type === "@@redux-form/CHANGE" && action.meta.form === "mySimpleForm" && action.meta.field === "favoriteColor") {
            const newState = {...state};
            delete(newState.values.lastName);
            return newState;
          }
          return state;
        }
      })
    });
    const store = createStore(reducer);

Form display code

    const SimpleForm = props => {
        const { handleSubmit, pristine, reset, submitting } = props;

        return (
          <form onSubmit={handleSubmit}>
            <div>
              <label>First Name</label>
              <div>
                <Field
                  name="firstName"
                  component="input"
                  type="text"
                  placeholder="First Name"
                />
              </div>
            </div>

            <div>
              <label>Last Name</label>
              <div>
                <Field
                  name="lastName"
                  component="input"
                  type="text"
                  placeholder="Last Name"
                />
              </div>
            </div>

            <div>
              <label>Favorite Color</label>
              <div>
                <Field name="favoriteColor" component="select">
                  <option />
                  <option value="ff0000">Red</option>
                  <option value="00ff00">Green</option>
                  <option value="0000ff">Blue</option>
                </Field>
              </div>
            </div>

            <div>
              <button type="submit" disabled={pristine || submitting}>Submit</button>
              <button type="button" disabled={pristine || submitting} onClick={reset}>
                Clear Values
              </button>
            </div>
          </form>
        );
      };

      export default reduxForm({
        form: 'mySimpleForm', // a unique identifier for this form
      })(SimpleForm);

What I am looking for any other approach using a redux form library.

Many thanks in advance.

Answer 1

You can utilise change function from redux-form.

import { reduxForm, change } from 'redux-form';

...
handlePartialUpdate = () => {
  this.props.updateField('formName', 'lastName', '');
}
render()
  {
    return(
      <form>Your form here</form>
    );
  }    
...

const mapDispatchToProps = dispatch => ({
  updateField: (form, field, newValue) => dispatch(change(form, field, newValue)),
});

Reference link here.