1
UserRegistrationForm
이라는 구성 요소와 UserRegistration
이라는 컨테이너가있는 사용자 등록 양식을 만들려고합니다. 내가 루트 감속기에 form
에 REDUX 형태의 '감속기를 장착했는지 확인하지만, 난 여전히 내 브라우저의 콘솔에서 다음과 같은 오류를 얻을 :reacty.js 앱에서 redux-sagas와 redux-form을 통합
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,
};
여기에 표시 할 관련 코드는 작성시 redux 저장소에 전달하는 reducer를 정의하는 코드입니다. – stone