Search code examples
javascriptreactjsreduxreact-reduxredux-form

Redux-Forms submission data is empty


I have a trouble with redux-forms. When the form is submitted, the data object is empty. There are just an input and a submit button. Here is the code and I cannot understand what I am doing wrong.

In Search view:

render() {
        const {submitSearchForm} = this.props;

        return (
            <div>
                <SearchForm onSubmit={submitSearchForm}/>
            </div>
        );
    }

And in Search form:

renderTextField = ({input, placeholder, leftIcon, rightIcon, clickableIcon, width}) => {

    return <TextField placeholder={placeholder}
                      leftIcon={leftIcon}
                      rightIcon={rightIcon}
                      clickableIcon={clickableIcon}
                      width={width}
                      {...input}/>;
};

render() {
    const {handleSubmit, fields} = this.props;

    return (
        <div className="row">
            <form onSubmit={handleSubmit}>

                <Field name="searchText"
                       component={this.renderTextField}
                       placeholder="Enter title and/or skills"
                       leftIcon="icon-search"
                       width={424}
                       field={fields.searchText}/>

                <Button type="default"
                        label="go"
                        size="medium"
                        isSubmitButton={true}/>
            </form>
        </div>
    );
}

And this is how I connect reduxForms with the SearchForm:

const reduxSearchForm = reduxForm({
    form: "Search",
    fields: ["searchText"]
});

export default(reduxSearchForm(SearchForm));

Solution

  • After checking everything by the documentation, I found out that the problem was when combining reducers. It is very important to map the formReducer to form. Here it is:

    export const reducer = combineReducers({
        form: formReducer,
        search
    });