reacty.js 앱에서 redux-sagas와 redux-form을 통합

Question

UserRegistrationForm이라는 구성 요소와 UserRegistration이라는 컨테이너가있는 사용자 등록 양식을 만들려고합니다. 내가 루트 감속기에 form에 REDUX 형태의 '감속기를 장착했는지 확인하지만, 난 여전히 내 브라우저의 콘솔에서 다음과 같은 오류를 얻을 :

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

UserRegistrationForm 코드 :

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

컨테이너 UserRegistration 코드 :

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

나는 redux-sagas가 redux-thunk보다 매우 다르게 작동하며 reducers에 선택기가 필요할 수도 있음을 알고 있습니다. 나는 폼에 다음과 같은 선택을 만들려고 않았다,하지만 키 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

당신이 가게의 설정에서 REDUX 형태의 감속기를 삽입 했습니까?
다음은 공식 문서입니다. http://redux-form.com/5.2.5/#/api/reducer?_k=d08mdo