在react.js应用程序中将redux-form与redux-sagas集成在一起

Question

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,
};

Answer 1

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