使用react和axios以redux形式进行基于服务器的错误处理

我不确定我的确切问题是什么，因为我对REDx和所涉及的各种插件做出反应是相当新的 .

我的设置使用以下包：

"axios": "^0.17.0",
"react": "^16.1.1",
"react-dom": "^16.1.1",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"redux": "^3.7.2",
"redux-form": "^7.1.2",
"redux-promise": "^0.5.3"

我有一个组件使用表单将数据发布到服务器 endpoints .

根据结果，我想显示表单级别验证，例如： username does not exist 我想显示表单级别错误 . 或者，如果我得到 404 响应，我也希望能够处理这个问题 .

我目前使用文件底部的标准方法将我的组件链接到 redux-form 库 . 我的验证函数在表单提交之前按预期运行 .

我的表单有一个 onSubmit 属性，可以解析为返回的promise . 此承诺是从发出服务器请求的操作创建者中提取的 .

我已经阅读了redux-form docs，看起来我正在寻找SubmissionError .

当我在我的 onSubmit 函数中抛出此错误时，我得到了预期的行为，然后我的动作创建者没有运行 .

onSubmit(values) {
        throw new SubmissionError({_error: 'test' })            
        return this.props.loginUser(values));
    }

如果我从返回的promise中链接一个 .then() 并在此处抛出 SubmissionError ，我会收到另一个错误 .

onSubmit(values) {
        return this.props.loginUser(values).then(() => { throw new SubmissionError({_error: 'test' })});
    }

我已准备好许多答案，但没有一个适合我的情况 . 有些是相似的，我已经能够实现这一点，因为我仍然无法按预期触发依赖于服务器响应的表单级别错误 .

LoginForm：

import React, { Component } from 'react';
import { Field, reduxForm, SubmissionError } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';

import { loginUser }  from '../../../actions';

import InputField from '../Fields/InputField.js';

import { VIEWS } from '../../../routes';

class Login extends Component {

    constructor(props) {
        super(props);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onSubmit(values) {
        return this.props.loginUser(values);
    }

    render() {
        const { handleSubmit } = this.props;

        return (
            <div className="auth-form">
                <div className="auth-block">
                    <div className="auth-content">
                        <h1>Specify with Certainty</h1>
                        <h1>{this.props.error}</h1>
                        <form onSubmit={handleSubmit(this.onSubmit)}>
                            <Field
                                name="email"
                                placeholder="Email"
                                type="email"
                                component={InputField}
                            />
                            <Field
                                name="password"
                                placeholder="Password"
                                type="password"
                                component={InputField}
                            />
                            <button className="action submit" type="submit">Sign in</button>
                            <div className="checkbox">
                                <label htmlFor="remember">
                                    <Field
                                        name="remember"
                                        type="checkbox"
                                        component={InputField}
                                    />
                                    <span>Remember me</span>
                                </label>
                            </div>
                        </form>
                        <div className="register-promt">
                        <p>Don't have an account?</p>
                        <Link to={VIEWS.REGISTER}>Register Now &raquo;</Link>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

function validate(values) {

    const errors = {};

    // Need to validate email here

    if(!values.email) {
        errors.email = "Enter an email";
    }

    if(!values.password) {
        errors.password = "Enter a password";
    }

    return errors;
}

const formData = {
    validate,
    form: 'LoginForm'
};

const connected = connect(null, { loginUser })(Login);

export default reduxForm(formData)(connected);

动作创作者

export function loginUser(values) {

    const request = axios({
        method: 'post',
        crossdomain: true,
        url: API.LOGIN,
        data: values
    }).catch((error) => {
        console.log('hello world');
        throw new SubmissionError({_error: 'testing'});
    });

    return {
        type: LOGIN_USER,
        payload: request
    };
}

我想我在这里缺少一些小东西，但非常重要 .

如何使用redux-form库以预期的方式基于服务器响应将错误传递给我的表单组件？

任何帮助表示赞赏 .