I am able to render an input field using redux-form, but I can't seem to type any text inside the field (the component seems to re-render with each keystroke). Below is the code, I created a really simple one to try to pinpoint the problem:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';
import { Field, reduxForm, reducer as formReducer } from 'redux-form';
const reducers = {
// ... your other reducers here ...
form: formReducer // <---- Mounted at 'form'
};
const reducer = combineReducers(reducers);
const store = createStore(reducer);
class TestForm extends Component {
formSubmit(props) {
console.log('form submitted');
}
render() {
const { handleSubmit } = this.props;
return (
<div>
This is a test form.
<div>
<form onSubmit={handleSubmit(this.formSubmit.bind(this))}>
<Field name="firstField" component="input" type="text" />
<button type="submit">Submit</button>
</form>
</div>
</div>
);
}
}
TestForm = reduxForm({
form: 'testingForm'
})(TestForm);
export default TestForm;I also literally copied and pasted the example from the official redux-form docs: http://redux-form.com/6.0.2/docs/MigrationGuide.md/ and I still encounter the same problem. Been trying to figure this out for some hours now. Could it be the version of redux or redux-form?
I'm using redux v3.5.2 and redux-form v6.2.1.
Would appreciate any help!
I had the same issue. The cause was that I failed to add the formReducer to the list of reducers I was using. To fix I added:
import { reducer as formReducer } from 'redux-form'
const RootReducer = combineReducers({
...
form: formReducer // <---- Mounted at 'form'
})
I think you need to look into the react-redux docs. This component needs to be placed inside a <Provider store={store}> component. Perhaps you are doing that outside this file and have just included the store initialization to be informative?