Wie exportiert man mapStateToProps und Redux Form?

Question

Ich verwende Redux Form (ver. 6) für eine Anmeldeseite. Was ich tun möchte, ist, wenn der Benutzer das Formular ausfüllt und auf "Senden" klickt, den Text aus meinem Status nimmt, sodass ich eventuell eine Aktion mit dieser E-Mail und diesem Passwort versenden kann. Ich habe jedoch Probleme mit dem Export dieser Komponente, während beide Verbindungen von react-redux und Redux Form verwendet werden.

Mit reagieren-redux, verbinden will wie so exportiert werden, wenn Staat Requisiten Abbildung:

Exportstandard verbinden (mapStateToProps) (Loginform)

jedoch Redux Formular will Export ist wie diese einrichten :

export default reduxForm({ 
    form: 'LogInForm', 
    validate, 
})(LogInForm); 

Gibt es eine Möglichkeit, diese beiden zu kombinieren? Ich habe versucht, etwas wie:

const reduxFormConfig = reduxForm({ 
    form: 'LogInForm', 
    validate, 
}); 

export default connect(mapStateToProps)(ReduxFormConfig)(LogInForm) 

aber es hat nicht funktioniert.

Oder Vielleicht ist das ein besserer Ansatz, um dies zu behandeln? Hier ist der vollständige Code von innerhalb meiner Komponente:

import React from 'react'; 
import { connect } from 'react-redux'; 
import { Field, reduxForm } from 'redux-form'; 
import InputField from '../InputField'; 
import { validateLogInSignUp as validate } from '../../utils/validateForms.js'; 

const LogInForm = (props) => { 
    const { 
    handleSubmit, 
    pristine, 
    submitting, 
    } = props; 

    return (
    <div> 
     <form onSubmit={handleSubmit}> 
     <Field 
      name="email" 
      type="email" 
      component={InputField} 
      label="email" 
     /> 
     <Field 
      name="password" 
      type="password" 
      component={InputField} 
      label="password" 
     /> 
     <div> 
      <button type="submit" disabled={submitting}>Submit</button> 
     </div> 
     </form> 
    </div> 
); 
}; 

const mapStateToProps = state => { 
    return { 
    loginInput: state.form, 
    }; 
}; 

// export default connect(mapStateToProps)(LogInForm) 

// export default reduxForm({ 
// form: 'LogInForm', 
// validate, 
// })(LogInForm); 

Alle und alle Hilfe wird sehr geschätzt. Vielen Dank!

Answer 1

Mit redux-form sollten Sie nicht auf den Status direkt in Ihrem LoginForm zugreifen müssen. Stattdessen sollten Sie die Werte in Ihrer Stammkomponente zugreifen, wenn das Formular abgeschickt wird:

// LoginForm.js 
const LogInForm = (props) => { 
    ... 
}; 

export default reduxForm({ 
    form: 'LogInForm', 
    validate, 
})(LogInForm); 


// Parent.js 
import LoginForm from './LoginForm'; 

const handleSubmit = (values) => { 
    alert(JSON.stringify(values)); // { email: 'foo@bar.com', password: '1forest1' } 
}; 

const Parent = (props) => { 
    return (
    <LoginForm onSubmit={ handleSubmit } /> 
); 
}; 

Siehe https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L42 für ein vollständigeres Beispiel einer einfachen Form.

Answer 2

Es gibt noch eine Möglichkeit, diese beiden in reduxForm v6 zu kombinieren:

reduxForm({ 
    form: 'LogInForm', 
    validate, 
})(LogInForm); 

export default connect(mapStateToProps)(LogInForm) 

Hier ist, wie:

import React, { Component } from 'react'; 
import { connect } from 'react-redux 

class LogInForm extends Component { 
    ... 
} 

function mapStateToProps(state) { 
    return { ... } 
} 

function mapDispatchToProps(dispatch) { 
    return { ... } 
} 

// First decorate your component with reduxForm 
LogInForm = reduxForm({ 
    form: 'LogInForm', 
    validate, 
})(LogInForm); 

// Then connect the whole with the redux store 
export default connect(mapStateToProps, maDispatchToProps)(LogInForm) 

Answer 3

Es gibt mehrere Threads mit dem gleichen Problem. I recently posted my take with my solution here aber mit ein paar Variationen.

1. Ich verwendete eine klassenbasierte Komponente als eine Funktion basiert. Ich habe Anleitungen gefunden, um diese Art und Weise zu implementieren und zu erklären, dass die connect-Methode von react-redux es zu einer Komponente höherer Ordnung macht und daher am besten mit einer Klasseninstanz verwendet werden kann.

2. Wie @doncredas erwähnt, reduxForm und reagieren-redux die Verbindungsmethode sollte separat, aber umgesetzt werden, meine Implementierung ist wie folgt:

   function mapStateToProps(state) { 
       return { form: state.form }; 
   } 
   
   Signin = connect(mapStateToProps, actions)(Signin); 
   Signin = reduxForm({ 
   form: 'signin' 
   })(Signin); 
   export default Signin; 
   

[später hinzugefügt] Eine andere Variante sein kann:

const form = reduxForm({ form: 'signin' }); 
export default connect(mapStateToProps, actions)(form(Signin)); 

Answer 4

Sie können dies versuchen:

import React from 'react'; 
import { connect } from 'react-redux' ; 
import { reduxForm } from 'redux-form'; 

class Example extends React.Component { 
    ... 
} 

function mapStateToProps(state) { 
    return { ... } 
} 

function mapDispatchToProps(dispatch) { 
    return { ... } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(reduxForm({ 
     form: 'formname', 
     validate 
})(Example));