如何导出 mapStateToProps 和 Redux Form?
How to export mapStateToProps and Redux Form?
我正在使用 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);
非常感谢任何和所有的帮助。谢谢!
使用 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。
在 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)
有多个线程存在相同问题。 I recently posted my take with my solution here 但有一些变化。
我使用了基于 class 的组件而不是基于函数的组件。我找到了具体实现这种方式的指南,并解释说 react-redux 的连接方法使其成为高阶组件,因此它最好与 class 实例一起使用。
@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));
你可以试试这个:
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));
我正在使用 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);
非常感谢任何和所有的帮助。谢谢!
使用 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。
在 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)
有多个线程存在相同问题。 I recently posted my take with my solution here 但有一些变化。
我使用了基于 class 的组件而不是基于函数的组件。我找到了具体实现这种方式的指南,并解释说 react-redux 的连接方法使其成为高阶组件,因此它最好与 class 实例一起使用。
@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));
你可以试试这个:
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));