CODEWITHSUNDEEP
javascriptreact-reduxredux-form
Patryk Janik
Patryk Janik

Reputation: 31

Redux-form onChange not trigger correctly on the form

I'm using reduxForm.

I created component with 

<form>
    <Field name="example" component="SomeCustomInputComponent" type="text"/>
</form>

And I apply whole component to reduxForm with onChange function : 

export default reduxForm({
    form: 'settingsAuthorization',
    destroyOnUnmount: false,
    forceUnregisterOnUnmount: true,
    enableReinitialize: true,
    onChange: (value, dispatch, props) => {
        console.warn(value);
    }
})(component);

And after putting some values I the onChane action doesn't do anything.

The funniest thing is that I tried to debug usage of my onChange function and I noticed that : Debbug IMG

Here nextProps.values are the same like this.props.values. And also when I change content on the form. Values of nextProps and this.props. are as initialized.

But on the redux devtool site I get information about dispatched redux-form/CHANGE action :

@@redux-form.CHANGE

And I can see that the form values are changed inside of global store (store.form.form_name.values.name) :

form -> form_name -> values -> name : 'old Name' => 'new Name'

Also when I put : 

onChange: (value, dispatch, props) => {
        console.warn(value);
    }

property for other form which I have on my site everything goes well.

How I can fix my first for for reacting on change event by using react-redux ?

Upvotes: 1

Views: 2102

Answers (1)

Andy_D
Andy_D

Reputation: 4228

You need to add the form reducer to your redux reducers so your form state is stored and updated in the redux store. Docs on how to do this here

If you aren't using redux for anything else, you'll need to createStore, and wrap your app in the react-redux Provider, more on that here

Upvotes: 1

Related Questions