reactjs - 如何导出mapStateToProps和Redux Form？

Question

我正在使用 Redux Form(版本 6)作为登录页面。我想做的是，当用户填写表单并单击“提交”时，从我的状态中获取文本，以便我最终可以使用该电子邮件和密码发送操作。但是，我在使用react-redux 和 Redux Form 的连接时导出此组件时遇到问题。

使用react-redux，当将状态映射到props时，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);

非常感谢任何和所有帮助。谢谢!

Answer 1

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