Updating redux-form fields using bindActionCreators

I have a redux-form with a dropdown that depends on the value chosen from another dropdown.

I have a filter approach that looks ideal for condensing the alternatives from the state to fill my dependant dropdown.

I discovered that in order to change the value in the store, I needed to choose a dropdown item from the dependant dropdown.

I learned about redux-form [Action Creators] through this source: https://redux-form.com/6.0.0-alpha.4/docs/api/actioncreators.md/. They are internal processes from redux-form that allow us to dispatch them as necessary.

When filtering the dependent dropdown options, I was interested in changing that field. For situations like this, redux-form provides the change method.

It was quite easy to set up.

import { bindActionCreators } from 'redux'
import { Field, change } from 'redux-form'

// other imports ...
const mapDispatchToProps = (dispatch) => ({
  updateField: bindActionCreators((field, data) => {
    change(FORM_NAME, field, data)
  }, dispatch)

Then using it:

this.props.updateField('dependent_field_name', newValue)

Something important to note and quoting redux's documentation on bindActionCreators:

The only use case for bindActionCreators is when you want to pass some action creators down to a component that isn't aware of Redux, and you don't want to pass dispatch or the Redux store to it.