无法以redux-form显示提交错误

Question

i'm trying to display submit errors in my form but i cannot figure out why this doesn't work. When i try to submit form with errors i'm getting just simple error in console and cannot submit it again despite that buttons are enabled and no errors are displayed in my form.

Uncaught (in promise)

const validate = values => {
    const errors = {}
    const requiredFields = [ 'email', 'password' ]
    requiredFields.forEach(field => {
        if (!values[ field ]) {
            errors[ field ] = 'Pole wymagane'
        }
    })
    if (values.email && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
        errors.email = 'Podany adres jest nieprawidłowy'
    }
    return errors
}

function submit(values, dispatch) {
        return new Promise((resolve, reject) => {
            dispatch(actionCreators.loginUser(values.email, values.password))
            .catch( err => {
                reject(err)
            })
        })
    }

class LoginForm extends Component {
    constructor(props) {
        super(props);
        //this.onSubmit = this.onSubmit.bind(this);
    }
    render() {
        const { error, handleSubmit, pristine, reset, submitting } = this.props
        return (
            <form onSubmit={handleSubmit(submit)}>
                <div>
                    <Field name="email" 
                    component={renderTextField} 
                    label="Email"/>
                </div>
                <div>
                    <Field name="password" 
                    component={renderTextField} 
                    type="password"
                    label="Hasło">
                        {error && <strong>{error}</strong>}
                    </Field>
                </div>
                <br/>
                <div>
                    <RaisedButton label="Zaloguj" 
                    primary={true} 
                    type="submit" 
                    disabled={pristine || submitting} />
                    <RaisedButton type="button" 
                    disabled={pristine || submitting} 
                    onClick={reset}>Reset
                    </RaisedButton>
                </div>
                <br />
            </form>
        )
    }
}
reactMixin(LoginForm.prototype, LinkedStateMixin);

const mapStateToProps = (state) => {
    return {
        user: state.user.user,
        isAuthenticated: state.user.isAuthenticated
    }
}
// const mapDispatchToProps = (dispatch) => {
//     return {
//         actions: bindActionCreators(actionCreators, dispatch)
//     }
// }
const form =  reduxForm({
    form: 'LoginForm',
    validate,
    onSubmit: submit
})(LoginForm);

export default connect(mapStateToProps )(form);

Answer 1

As it looks at a glimpse, there's some uncaught error inside the submit() function (as the log says...).

This is because Redux-Form only catches SubmissionError , but not other plain errors.

So the solution is to handle the error yourself (for instance dispatch a submissionFailed action inside the reject implementation or a catch block)

For instance:

function submit(values, dispatch) {
    return new Promise((resolve) => {
        dispatch(actionCreators.loginUser(values.email, values.password))
        .catch( err => {
            //reject(err)
            dispatch(someNewErrorAnouncingAction(err))
        })
    })
}