在react.js應用程序中將redux-form與redux-sagas集成在一起

Question

我試圖創建具有一個名為分量的用戶注冊表單UserRegistrationForm和一個叫容器UserRegistration 。 雖然我確定我已經安裝了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完全不同，可能需要減速器上的選擇器。 我確實嘗試在表單上創建以下選擇器，但它沒有得到關鍵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,
};

Answer 1

你在商店的設置中插入了redux-form的reducer嗎？
以下是官方文檔： http： //redux-form.com/5.2.5/#/api/reducer？_k = d08mdo