Action-Ersteller, die nicht in "this.props" mit redux-form 6.0.0-rc.3 angezeigt werden

Question

Als ich Redux-Form 5.3.1 verwendet habe, konnte ich auf meine Ersteller zugreifen. Aber als ich Material-UI benötigte, habe ich es auf 6.0.0-rc.3 aktualisiert.

Änderungen von 5.3.1 bis 6.0.0:

• Entfernte Felder von Render():

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

• Fehler entfernt Validierung unter Eingänge:

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

• Entfernt Felder Array von Export Standard:

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

• hinzugefügt Wrapper für Material-UI-Komponenten:

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

Code:

1 - console.log (this.props) meldet keine Aktion Schöpfer - sollte signupUser Funktion

'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); 

EDIT

Changed log:

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

An:

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

Es arbeitete. Ist es der beste Weg, das zu beheben?

Answer 1

Statt:

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

Verwendung:

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

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

PS: Könnte eine Arbeit um

Answer 2

sein können Sie komponieren verwenden wie

folgen

import { compose } from 'redux' 
.... 
export default compose(
    reduxForm({ 
     form: 'survey', 
    }), 
    connect(mapStateToProps, actions) 
)(Signup) 

Answer 3

Um diese Werte in Ihre redux-form-dekorierte Komponente zu bekommen, müssen Sie () mit dem Redux-Status selbst verbinden und aus den Daten Reduzierer auf die initialValues-Prop.

http://redux-form.com/6.0.0-alpha.4/examples/initializeFromState/

Answer 4

Sie Konstruktor verwenden können Verfahren mit Ihrem vorhandenen Requisiten zu binden. Sie müssen keine Aktionen und den Anfangszustand übergeben.

class Signup extends Component { 

    constructor(props) { 
    super(props); 
    this.handleSubmit = this.handleSubmit.bind(this) 
    } 

    handleSubmit(formProps) { 
    console.log(this.props); 
    this.props.signupUser(formProps); 
    } 
    render() { 

    const { handleSubmit, pristine, submitting } = this.props; 

    return (

    <form id="form" onSubmit={this.handleFormSubmit}> 
    <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"/> 
     </CardText> 
     <CardActions> 
      <FlatButton type="submit" label="Criar!"/> 
     </CardActions> 
     </Card> 
    </form> 
    ); 
    } 
} 
} 
Signup = reduxForm({ 
form: 'signup', 
validate})(Signup); 

export default Signup = connect()(Signup);