reduxForm：如何最好地调度一个动作？

Question

我正在尝试使用 redux 表单提交地址表单。这似乎是处理输入数据和验证的好方法。

我只是想知道我是否可以使语法更清晰一些，因为坦率地说，尝试同时使用 connect 会使代码在底部变得一团糟。在我的例子中，我想将地址数据发送到一个节点端点，所以我需要调用一个动作生成器来发送一个 AJAX 请求。我想知道我是否遗漏了一些明显的东西，以便更容易地在提交函数中调度一个动作。

class AddressForm extends Component {

renderContent() {
    return formFields.map(({ name, label }) => (
        <Field 
            key={name}
            name={name}
            label={label}
            type='text'
            component={FormField}
        />
        )
    );
};

render() {
    return (
        <form onSubmit={this.props.handleSubmit}>
            {this.renderContent()}
            <button type="submit">Next</button>
        </form>
    );
};
};

const validate = (values) => {
const errors = {};

errors.email = validateEmail(values.email || '');

formFields.forEach(({ name }) => {
    if (!values[name]) errors[name] = 'Please provide a value';
});

return errors;
};

const myReduxForm = reduxForm({
   validate,
   form: 'addressForm'
})(AddressForm);

const mapDispatchToProps = (dispatch, ownProps) => ({
   onSubmit: data => dispatch(submitForm(data, ownProps.history))
});

export default connect(null, mapDispatchToProps)
(withRouter(myReduxForm));

Answer 1

当然，您可以在组件内部使用 handleSubmit 属性而不是连接。它允许您提供带有三个参数的回调：values、dispatch 和 props。所以你可以这样做：

<form onSubmit={this.handleSubmit((values,dispatch,{submitForm})=> dispatch(submitForm(values)))} />

reduxForm：如何最好地调度一个动作？

reduxForm: how to best dispatch an action?

reactjs

redux

redux-form