首页 文章

如何导出mapStateToProps和Redux Form？

提问于
浏览 次
6

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

使用react-redux时，在将状态映射到props时，想要像这样导出connect：

export default 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

4 回答

  • 1

    你可以试试这个：

    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));
    回复于
  • 8

    有多个线程有相同的问题 . I recently posted my take with my solution here但有一些变化 .

    • 我使用的是基于类的组件而不是基于函数的组件 . 我找到了专门实现这种方式的指南，并解释了react-redux的connect方法使它成为一个高阶组件，因此最好与类实例一起使用 .

    • 如@doncredas所述，reduxForm和react-redux的connect方法应该单独实现，但是，我的实现如下：

    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));
    回复于
  • 2

    还有一种方法可以将这两个结合在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)
    回复于
  • 4

    使用 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: 'foo@bar.com', password: '1forest1' }
};

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

    有关简单表单的更完整示例，请参见https://github.com/erikras/redux-form/blob/master/examples/simple/src/index.js#L42 .

    回复于

相关问题