动作创建者未在"this.props"中显示与redux-form 6.0.0-rc.3 [英] Action creators not showing in "this.props" with redux-form 6.0.0-rc.3

问题描述

使用redux-form 5.3.1时，我可以访问动作创建者.但是当我需要Material-UI时，我将其更新为6.0.0-rc.3.

When I used redux-form 5.3.1 I was able to access my action creators. But as I needed Material-UI, I updated it to 6.0.0-rc.3.

从5.3.1更改为6.0.0:

Changes from 5.3.1 to 6.0.0:

• 从render()中删除了字段:

const { handleSubmit, fields: { email, password, passwordConfirm }} = this.props;

• 从输入下方删除了错误验证:

{email.touched && email.error && <div className="error">{email.error}</div>}

• 从导出默认值中删除了字段数组:

export default reduxForm({ form: 'signup', fields: ['email', 'password', 'passwordConfirm'], validate }, mapStateToProps, actions)(Signup);

export default reduxForm({ form: 'signup', fields: ['email', 'password', 'passwordConfirm'], validate }, mapStateToProps, actions)(Signup);

• 为Material-UI组件添加了包装器:

import { renderTextField, renderCheckbox, renderSelectField, renderDatePicker } from '../material-ui-wrapper';

代码:

1-console.log(this.props)不记录任何操作创建者-应该记录signupUser函数

1 - console.log(this.props) logs no action creator - should log signupUser function

'use strict';
import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import * as actions from '../../actions';

import { renderTextField } from '../material-ui-wrapper';

import {Card, CardActions, CardHeader, CardText} from 'material-ui/Card';
import FlatButton from 'material-ui/FlatButton';

class Signup extends Component {
  handleFormSubmit(formProps) {
    console.log(this.props);
    this.props.signupUser(formProps);
  }

  renderAlert() {
    if (this.props.errorMessage) {
      return (
        <div className="error">
          {this.props.errorMessage}
        </div>
      );
    }
  }

  render() {
    const { handleSubmit, pristine, submitting } = this.props;
    return (
      <form id="form" onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
        <Card>
          <CardHeader title="Cadastre-se"/>
          <CardText>
            <Field name="email" component={renderTextField} label={"Email"} fieldType="text"/>
            <Field name="password" component={renderTextField} label={"Senha"} fieldType="password"/>
            <Field name="passwordConfirm" component={renderTextField} label={"Confirmação de senha"} fieldType="password"/>
            {this.renderAlert()}
          </CardText>
          <CardActions>
            <FlatButton type="submit" label="Criar!"/>
          </CardActions>
        </Card>
      </form>
    );
  }
}

function validate(formProps) {
  const errors = {};

  if (!formProps.email || !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(formProps.email)) {
    errors.email = 'Por favor, informe um email válido';
  }

  if (formProps.password !== formProps.passwordConfirm) {
    errors.password = 'Senhas devem ser iguais.';
  }

  if (!formProps.password) {
    errors.password = 'Por favor, informe uma senha.';
  }

  if (!formProps.passwordConfirm) {
    errors.passwordConfirm = 'Por favor, confirme a sua senha.';
  }

  return errors;
}

function mapStateToProps(state) {
  return { errorMessage: state.auth.error };
}

export default reduxForm({
  form: 'signup',
  validate
}, mapStateToProps, actions)(Signup);

编辑

已更改:

export default reduxForm({ form: 'signup', validate }, mapStateToProps, actions)(Signup);

export default reduxForm({ form: 'signup', validate }, mapStateToProps, actions)(Signup);

收件人:

Signup = reduxForm({ form: 'signup', validate })(Signup); export default Signup = connect(mapStateToProps, actions)(Signup);

Signup = reduxForm({ form: 'signup', validate })(Signup); export default Signup = connect(mapStateToProps, actions)(Signup);

它有效.这是解决此问题的最正确方法吗?

It worked. Is it the most correct way to fix this?

推荐答案

而不是:

export default reduxForm({
  form: 'signup',
  validate
}, mapStateToProps, actions)(Signup);

使用:

Signup = reduxForm({
form: 'signup',
validate})(Signup);

export default Signup = connect(mapStateToProps, actions)(Signup);

PS:可能可以解决

这篇关于动作创建者未在"this.props"中显示与redux-form 6.0.0-rc.3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！