So exportieren Sie mapStateToProps und Redux-Form?

Bin ich mit Redux Form (ver. 6) für eine log-in-Seite. Was ich gerne tun würde, ist, wenn der Benutzer das Formular ausfüllt und absendet, schnappen Sie sich den text aus meinem Zustand, so dass ich schließlich Versand mit einer Aktion, die E-Mail und Passwort. Allerdings hab ich Probleme mit dem exportieren diese Komponente während der Verwendung sowohl für die Verbindung von reagieren-redux und Redux Form.

Verwendung reagieren-redux, verbinden will, exportiert werden, so wie beim zuordnen von Staat zu Requisiten:

export-Standard-Verbindung(mapStateToProps)(LogInForm)

Jedoch Redux Form will er die Ausfuhr wie folgt eingerichtet:

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

Gibt es eine Möglichkeit, kombinieren diese zwei? Ich hatte versucht, so 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 zum Umgang mit diesem? Hier ist der vollständige code in meine 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);

Jegliche Hilfe ist viel geschätzt. Danke!

InformationsquelleAutor hidace | 2016-10-26
  1. 4

    Mit redux-form sollten Sie nicht brauchen, um den Zugriff auf die Status direkt in Ihrem LoginForm. Stattdessen sollten Sie die Werte zuzugreifen, die in Ihrer übergeordneten Komponente, 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: '[email protected]', password: '1forest1' }
};

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

    Sehen https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L42 für eine vollständige Beispiel einer einfachen form.

    • Aber was ist, wenn der Benutzer aktualisiert die Seite ?! ich sehe immer noch, dass der Zugriff auf reduxStore/Staat, durch die reduxForm ist wichtig, in einigen Fällen .
    • Nein, auch in deinem Beispiel solltest du nicht.
    InformationsquelleAutor Ashley 'CptLemming' Wilson
  2. 9

    Gibt es noch eine Möglichkeit, zu verbinden, diese beiden in reduxForm v6:

    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)
    InformationsquelleAutor doncredas
  3. 4

    Können Sie versuchen, diese :

    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));
    • Hinzufügen Sie können eine kleine Erklärung, wie Ihr code-snippet löst das Problem? Auf diese Weise wird Ihre Antwort wird mehr nützlich.
    • Es sollte die Antwort akzeptiert, da es der einfachere Weg
    InformationsquelleAutor Shivani
  4. 1

    Gibt es mehrere threads mit dem gleichen Problem. Vor kurzem habe ich gepostet mein nehmen mit meiner Lösung hier aber mit ein paar Variationen.

    1. Habe ich eine Klasse basierte Komponente als eine Funktion basiert. Ich habe gefunden Führer gezielt zu implementieren, die Art und Weise und zu erklären, dass die connect-Methode reagieren-redux machen es zu einem Höheren Order-Komponente und als solche ist es am besten mit einer Instanz der Klasse.

    2. Wie erwähnt von @doncredas, reduxForm und reagieren-redux connect-Methode umgesetzt werden sollten, die separat, aber meine Umsetzung 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 Weitere Variante kann sein:

    const form = reduxForm({ form: 'signin' });
export default connect(mapStateToProps, actions)(form(Signin));
    InformationsquelleAutor JaysQubeXon
Schreibe einen Kommentar