unable to throw SubmissionError in redux form - reactjs

Question

I'm trying to make a SubmissionError show up in my redux-form form (if backend server response isn't status code 200), but I'm not sure how to probably due to my beginner level experience in React, Redux, React Redux, Redux Form, and Axios. I've already tried a lot of things (and currently reverted back from them) by looking through various SO posts and Github issues. If someone/people can help me out, that'd be greatly appreciated!
The current error I'm getting is this promise uncaught message:
error screenshot
Although there are more files in my project, here are the relevant ones here (minus the import statements):
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
};
}