redux-form: how to dispatch change in normalizer

Question

Using redux-form 6.0.1

I have a form with 2 fields. One is selector, the other is an input.

      <Field name="toLanguage" component="select" normalize={normalizeLanguage}>
        {languages.map(function(item) {
          return <option key={item.id} value={item.name}>{item.display}</option>;
        })}
      </Field>

      <Field name="toValue" component="input" type="text" placeholder="toLanguageString" />

I'd like to change the content of the input change based on the state of the select field. I read about how it can be done here: https://github.com/erikras/redux-form/issues/442

So to give it a try I went ahead with dispatching a change manually

<button type="button" onClick={() => dispatch(change('TranslationDetail', 'toValue', 'foo')) }>dispatch</button>

This works, but this was the least recommended method. When I tried to use a normalizer, I ran into an error " Uncaught ReferenceError: change is not defined ". How should I change my normalizer to change the value of the field based on the state of the selector?

const normalizeLanguage = (value, previousValue, dispatch) => {
  if (!value) {
    return value
  }
  console.log(value)
  dispatch(change('TranslationDetail', 'toValue', value))
  return value
}

export default normalizeLanguage

Answer 1

You are probably missing the reference to the change function. Include the following line in your import declarations :

import {change} from 'redux-form';