如何导出 mapStateToProps 和 Redux 表单？

Posted 2023-02-19

【中文标题】如何导出 mapStateToProps 和 Redux 表单？

【英文标题】：How to export mapStateToProps and Redux Form?

【发布时间】：2017-03-08 20:04:44

【问题描述】：

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

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

导出默认连接(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);

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

【参考方案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));

【讨论】：

您能补充一点说明您的代码 sn-p 是如何解决问题的吗？这样你的答案就变得更有用了。

这应该是公认的答案，因为它是更简单的方法

【参考方案2】：

有多个线程有相同的问题。 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));

【参考方案3】：

在 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: '[e-mail]', password: '1forest1' 
;

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

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

【讨论】：

但是如果用户刷新了页面呢？！我仍然看到在某些情况下通过 reduxForm 访问 reduxStore/state 很重要。

不，即使在你的例子中你也不应该这样做。