Question

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

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

export default connect（mapStateToProps）（LogInForm）

但是，Redux Form希望它的导出设置如下：

print (df.columns.isin(df2.V1))
[False False False False  True False  True  True False False  True]

df.columns = np.where(df.columns.isin(df2.V1), 'DMR_' + df.columns, df.columns)
print (df)
        AE02       AE03       AE04       AE05   DMR_AE06       AE07  \
0  11.961936  18.570140  42.201084  28.002505  19.558917  18.145958   
1   2.990484   3.979316   0.000000   0.000000   1.778083   1.728187   
2   0.000000   0.000000   0.000000   0.000000   2.667125   0.000000   

    DMR_AE08   DMR_AE09       AE10       AE11   DMR_AE12  
0  16.529237  32.488564  34.034214  31.697100  44.932255  
1  13.774364   4.331809   0.000000  17.067669   0.000000  
2   4.591455   0.000000   0.000000   0.000000   2.139631

有没有办法将这两者结合起来？我尝试过类似的事情：

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

但它不起作用。

或许这是处理这个问题的更好方法？以下是我的组件中的完整代码：

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

export default connect(mapStateToProps)(ReduxFormConfig)(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)

Answer 2

使用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。

Answer 3

你可以试试这个：

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <HeaderControl />
        <MuiThemeProvider>
          <Switch>
            <Routes />
            <PrivateRoute path="/" component={Home} />
          </Switch>
        </MuiThemeProvider>
        <Footer />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app'),
);

Answer 4

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

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

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

如何导出mapStateToProps和Redux Form？

4 个答案: