Integrieren von redux-form mit redux-sagas in react.js app

Question

Ich versuche, ein Benutzerregistrierungsformular zu erstellen, das eine Komponente mit dem Namen UserRegistrationForm und einen Container namens UserRegistration hat. Obwohl ich sicher, habe ich die Redux-Form‘Minderer form in den Wurzelreduzierer montiert, bekomme ich noch die folgenden Fehler in der Konsole meines Browsers:

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

Der 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); 

Der Behälter Userregistrierung 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); 

Ich weiß Redux-Sagas arbeiten sehr anders als Redox-Thunk und erfordern möglicherweise Selektor auf den Reduzierstücken. Ich habe versucht die folgenden Selektor auf dem Formular zu erstellen, aber es hat nichts im Minderer für den Schlüssel form erhalten:

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

Haben Sie einfügen redux-Form des Minderer im Setup des Ladens?
Hier ist die offizielle Dokumentation: http://redux-form.com/5.2.5/#/api/reducer?_k=d08mdo