React Redux和副作用说明

Question

I'm wrapping my forms to provide automatic validation (I don't want to use redux-form).

I want to pass an onSubmit handler which must be fired after every input in form is validated: but how do I wait for form.valid property to turn into true && after wrapping submit was fired? I'm missing some logic here!

//in my Form.js hoc wrapping the forms
@autobind
submit(event) {
    event.preventDefault();

    this.props.dispatch(syncValidateForm({ formName: this.props.formName, form: this.props.form }));

    // ==> what should I do here? Here I know submit button was pressed but state is not updated yet with last dispatch result reduced!
    //if(this.props.form.valid) 
    // this.props.submit();
}

render() {
    return (
        <form name={this.props.formName} onSubmit={this.submit}>
            { this.props.children }
        </form>
    );

//action.js validating given input
export const syncValidateInput = ({ formName, input, name, value }) => {
    let errors = {<computed object with errors>};    
    return { type: INPUT_ERRORS, formName, input, name, value: errors };
};

//action.js validating every input in the form
export const syncValidateForm = ({ formName, form }) => {
    return dispatch => {
        for(let name in form.inputs) {
            let input = form.inputs[name];
            dispatch(syncValidateInput({ formName, input, name: input.name, value: input.value }));
        }
    };
};

//in my reducer I have
    case INPUT_ERRORS:
        let errors = value;
        let valid = true;
        let errorText = '';
        _.each(errors, (value, key) => {
            if(value) {
                valid = false;
                errorText = `${errorText}${key}\n`;
            }
        });
        form.inputs[name].errors = errors;
        form.inputs[name].valid = valid;
        form.inputs[name].errorText = errorText;

        _.each(form.inputs, (input) => form.valid = !!(form.valid && input.valid));

        return state;

Help!

Answer 1

Depending on your build config you could use Async/Await for your submit function. Something like

async submit(event) {
    event.preventDefault();

    const actionResponse = await this.props.dispatch(syncValidateForm({ formName: this.props.formName, form: this.props.form }));

    if (actionResponse && this.props.form.valid) { //for example
        // finish submission
    }
}

And I think you will need to update your syncValidateForm slightly but this should put you on the right path.