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

时间:2016-06-16 21:55:35

标签: forms reactjs redux redux-form redux-saga

我正在尝试创建一个用户注册表单,其中包含一个名为UserRegistrationForm的组件和一个名为UserRegistration的容器。虽然我确保已将redux-form'reducer安装到root reducer中的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完全不同,可能需要减速器上的选择器。我确实尝试在表单上创建以下选择器,但它没有在键form的reducer中得到任何内容:

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

1 个答案:

答案 0 :(得分:0)

您是否在商店的设置中插入了redux-form的reducer? 以下是官方文档:http://redux-form.com/5.2.5/#/api/reducer?_k=d08mdo