1

I am trying to create a user registration form that has a component named UserRegistrationForm and a container called UserRegistration. Although I make sure I have mounted the redux-form' reducer to form in the root reducers, I still get the following errors in my browser's console:

Uncaught (in promise) Error: You need to mount the redux-form reducer at "form"(…)

The UserRegistrationForm code:

import React, { PropTypes, Component } from 'react';
import { reduxForm } from 'redux-form';

// react mui:
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';

import styles from './styles.css';

// form elements
export const fields = ['username', 'email', 'password', 'passwordConfirm'];

const validate = values => {
    const errors = {};
    if (!values.username) {
        errors.username = 'Required';
    } else if (values.username.length < 3 || values.username.length > 20) {
        errors.username = 'Username length must between 3 and 20 characters';
    }
    return errors;
} // validate

export class UserRegistrationForm extends Component {
  render() {
    const { fields: { username, email, password, passwordConfirm }, resetForm, handleSubmit, submitting} = this.props;
    return (
      <div className={ styles.userRegistrationForm }>
        <form onSubmit={handleSubmit}>
            <TextField
                ref="username"
                hintText="Username"
                floatingLabelText="Username"
                errorText=""
            /><br />
            <TextField
                ref="email"
                hintText="Email"
                floatingLabelText="Email"
                errorText=""
            /><br />
            <TextField
                ref="password"
                hintText="Password"
                floatingLabelText="Password"
                type="password"
                errorText=""
            /><br />
            <TextField
                ref="confirm_password"
                hintText="Confirm Password"
                floatingLabelText="Confirm Password"
                type="password"
                errorText=""
            /><br />
        </form>
      </div>
    );
  }
}

UserRegistrationForm.propTypes = {
    fields: PropTypes.object.isRequired,
    handleSubmit: PropTypes.func.isRequired,
    resetForm: PropTypes.func.isRequired,
    submitting: PropTypes.bool.isRequired,
};

export default reduxForm({
    form: 'form',
    fields,
    validate,
    onSubmit: (values) => {
        return new Promise((resolve, reject) => {
            console.info('dispatching submit');
        });
    }
})(UserRegistrationForm);

The container UserRegistration code:

import React, { PropTypes, Component } from 'react';
import { connect } from 'react-redux';
import selectUserRegistration from './selectors';
import { createSelector } from 'reselect';

import {
    selectReduxForm
} from 'utils/reduxFormSelector';

import styles from './styles.css';

import {initialize} from 'redux-form';

// component
import UserRegistrationForm from '../../components/UserRegistrationForm';

export class UserRegistration extends Component { // eslint-disable-line react/prefer-stateless-function
    constructor(props, context) {
        super(props, context);
        // this.submitForm = this.props.handleSubmit.bind(this);
    }

    handleSubmit(data) {
        console.info('submitting form data: ', data);
    }

    render() {
        return (
          <div className={ styles.userRegistration }>
            This is UserRegistration container !
            <UserRegistrationForm onSubmit={this.handleSubmit} />
          </div>
        );
    }
}

// const mapStateToProps = selectUserRegistration();

function mapDispatchToProps(dispatch) {
  return {
    handleSubmit: (data) => dispatch(this.handleSubmit(data)),
    dispatch,
  };
}

export default connect(() => ({ }), {initialize})(UserRegistration);

I know redux-sagas work very differently than redux-thunk and may require selector on the reducers. I did try to create the following selector on the form, but it did not get anything in the reducer for the key form:

import { createSelector } from 'reselect';

const selectReduxFormDomain = () => state => {
    let reduxForm = state.get('form'); // root reducer
    return reduxForm;
};

const selectReduxForm = () => createSelector(
    selectReduxFormDomain(),
    (substate) => substate
);

export default selectReduxForm;
export {
    selectReduxFormDomain,
    selectReduxForm,
};
1
  • The relevant code to show here would have been the code that defines the reducer that you pass to the redux store when you create it. Commented Feb 6, 2017 at 0:30

1 Answer 1

0

Did you insert redux-form's reducer in the setup of the store?
Here is the official docs: http://redux-form.com/5.2.5/#/api/reducer?_k=d08mdo

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.