我正在尝试创建一个用户注册表单，其中包含一个名为的组件UserRegistrationForm和一个名为UserRegistration. 尽管我确保已将 redux-form' reducer 安装到formroot reducer 中，但我的浏览器控制台中仍然出现以下错误：
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 上的选择器。我确实尝试在表单上创建以下选择器，但它没有在减速器中为 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,
};