Как экспортировать mapStateToProps и Redux Form?

Я использую Redux Form (версия 6) для страницы входа в систему. Что я хотел бы сделать, так это когда пользователь заполняет форму и нажимает кнопку «Отправить», захватить текст из моего состояния, чтобы я мог в конечном итоге отправить действие с этим адресом электронной почты и паролем. Однако у меня возникли проблемы с экспортом этого компонента при использовании подключения как из реакции-redux, так и из Redux Form.

Используя response-redux, connect хочет, чтобы его экспортировали, как это при сопоставлении состояния с реквизитами:

экспортировать соединение по умолчанию (mapStateToProps) (LogInForm)

Однако Redux Form хочет, чтобы экспорт был настроен следующим образом:

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

Есть ли способ совместить эти два? Я пробовал что-то вроде:

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

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

но это не сработало.

Или, может быть, это лучший подход к решению этой проблемы? Вот полный код моего компонента:

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

Любая помощь очень ценится. Спасибо!


reactjs redux react-redux redux-form
person hidace    schedule 26.10.2016    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Используя redux-form, вам не нужно обращаться к состоянию прямо в вашем LoginForm. Вместо этого вы должны получить доступ к значениям в родительском компоненте при отправке формы:

// 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 } />
  );
};

См. https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L42, чтобы получить более полный пример простой формы.

person Ashley 'CptLemming' Wilson    schedule 26.10.2016
comment
Но что делать, если пользователь обновил страницу ?! Я все еще вижу, что доступ к reduxStore / state через reduxForm важен в некоторых случаях. - person Ahmed Younes; 12.04.2019
comment
Нет, даже в вашем примере не следует. - person Mateus Stanki; 25.04.2019

arrow_upward
10
arrow_downward

Есть еще способ объединить эти два в reduxForm v6:

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

export default connect(mapStateToProps)(LogInForm)

Вот как:

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)
person doncredas    schedule 28.10.2016

arrow_upward
4
arrow_downward

Вы можете попробовать это:

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));
person Shivani    schedule 23.11.2017
comment
Не могли бы вы добавить небольшое объяснение, как ваш фрагмент кода решает проблему? Таким образом, ваш ответ станет более полезным. - person NOhs; 23.11.2017
comment
Это должен быть принятый ответ, так как это более простой способ - person Vincent Decaux; 07.08.2018

arrow_upward
2
arrow_downward

Есть несколько потоков с одной и той же проблемой. Недавно я разместил здесь свой вариант решения, но с некоторыми вариациями.

  1. Я использовал компонент на основе классов, а не на основе функций. Я нашел руководства для конкретной реализации этого способа и объяснения, что метод connect для react-redux делает его компонентом более высокого порядка, и поэтому его лучше всего использовать с экземпляром класса.

  2. Как упоминалось @doncredas, метод подключения reduxForm и react-redux должен быть реализован отдельно, однако моя реализация выглядит следующим образом:

    function mapStateToProps(state) {
    return { form: state.form };
}

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

[Добавлено позже] Другой вариант:

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