Quickstart
Mount the redux-forms
reducer to your root reducer as reduxForms
.
import { createStore, combineReducers } from 'redux';
import reduxFormsReducer from 'redux-forms';
const rootReducer = combineReducers({
// ... your other reducers
reduxForms: reduxFormsReducer,
});
const store = createStore(rootReducer);
Create a component wrapped in the field
decorator.
import { field } from 'redux-forms-react';
const Input = props => (
<input type="text" {...props.input} />
);
export default field(Input);
Then simply wrap your desired form with the Form
component and you're ready to go!
import { Form } from 'redux-forms-react';
import Input from './Input';
const MyForm = props => (
<Form name="contact">
<div>
<label htmlFor="name">Name</label>
<Input name="name" />
</div>
<div>
<label htmlFor="email">Email</label>
<Input name="email" />
</div>
<button type="submit">Submit</button>
</Form>
);
export default MyForm;
That's it! This is how you mount the most basic form. For more advanced usage, check out the API docs below.