невозможно сгенерировать SubmissionError в избыточной форме

Question

Я пытаюсь, чтобы ошибка SubmissionError отображалась в моей форме в форме избыточности (если ответ внутреннего сервера не является кодом состояния 200), но я не уверен, что, вероятно, из-за моего опыта начинающего уровня в React, Redux, React Redux, Redux Form и Axios. Я уже много чего перепробовал (и в настоящее время отошел от них), просматривая различные сообщения SO и проблемы Github. Если кто-то / люди могут мне помочь, это было бы очень признательно!

Текущая ошибка, которую я получаю, это сообщение об отсутствии обещания: скриншот ошибки

Несмотря на то, что в моем проекте есть больше файлов, вот соответствующие (за исключением операторов импорта):

ssoLoginPage.js

const renderField = (field) => {
    const { input, label, name, type, meta: { touched, error } } = field;
    const placeholder = `Enter ${label} here`;
    return(
        <div className="slds-form-element slds-m-bottom--large">
            <label className="slds-form-element__label" htmlFor={label}>
                {label}
            </label>
            <div className="slds-form-element__control">
                <input
                    key={name}
                    id={name}
                    className="-input"
                    type={type}
                    placeholder={placeholder}
                    {...field.input}
                />
            </div>
            {touched && error && <span>{error}</span>}
        </div>
    );
};

class SsoLoginPage extends React.Component {
    constructor(props) {
        super(props);
    }
    onSubmit(values) {
        this.props.ssoLogin(values, () => {
            throw new SubmissionError({_error: "One or more credentials are incorrect"});
        });
    }
    render() {
        console.log("ssoLoginStatus:",this.props.ssoLoginStatus);
        const { error, handleSubmit} = this.props;
        return (
            <IconSettings iconPath="/slds-static-2.6.1/assets/icons">
                <div>
                    <Modal
                        title="SSO Login"
                        isOpen={!this.props.ssoLoginStatus}
                        onRequestClose={this.toggleOpen}
                        dismissOnClickOutside={false}
                    >
                        <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                            <Field
                                name="username"
                                type="text"
                                component={renderField}
                                label="Username"
                            />
                            <Field
                                name="password"
                                type="password"
                                component={renderField}
                                label="Password"
                            />
                            <Field
                                name="verificationCode"
                                type="password"
                                component={renderField}
                                label="Verification Code"
                            />
                            {error && <strong>{error}</strong>}
                            <Button type="submit" label="Login" variant="brand" />
                        </form>
                    </Modal>
                </div>
            </IconSettings>
        );
    }
}

function mapStateToProps({ssoLoginStatus}) {
    return ssoLoginStatus;
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ssoLogin},dispatch);
}

export default reduxForm({
    form: "ssoForm" // a unique identifier for this form
})(
    connect(mapStateToProps,mapDispatchToProps)(SsoLoginPage)
);

settings.setAppElement("#root");

reducersIndex.js

const rootReducer = combineReducers({
    ssoLoginStatus: ssoReducer,
    form: formReducer
});

export default rootReducer;

ssoReducer.js

const ssoProcess = (state, action) => {
    console.log("ssoLogin action:",action);
    switch(action.payload.status) {
        case 200:
            //everything's okay
            console.log("reaching 200 case?");
            return {...state, "ssoLoginStatus": true};
        default:
            //not sure what to do here currently
            return state;
    }
};

export default function(
    state={"ssoLoginStatus": false}, action) {
    console.log("action type:",action.type);
    switch (action.type) {
        case SSO_LOGIN:
            console.log("return something here hopefully");
            return ssoProcess(state, action);
        default:
            return state;
    }
}

actionsIndex.js

export const SSO_LOGIN  = "SSO_LOGIN";
export const BASE_URL = "http://localhost:8080";

export function ssoLogin (values, callback) {
    console.log("went inside ssologin action creator!",
        values.username,
        values.password,
        values.verificationCode);
    const url = `${BASE_URL}/ssologin?username=${values.username}&password=${values.password}&verificationCode=${values.verificationCode}`;
    console.log("url w/ params:",url);
    const request = axios
        .post(url,{responseType: "json"})
        .then(response => {
            console.log("axios response: ",response);
            return response;
        })
        .catch(error => {
            console.log("sso error: ",error);
            return callback();
        });
    return {
        type: SSO_LOGIN,
        payload: request
    };
}