response-redux-form 5.3.1: asyncValidation onChange никогда не запускается

Question

Я пытаюсь сделать asyn c проверку поля name с redux-form. Но функция проверки запускается только при отправке и никогда onChange. Чего мне не хватает?

import React, { PureComponent } from 'react'; import PropTypes from 'prop-types';
import { reduxForm } from 'redux-form';
import Paper from 'material-ui/Paper';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {
    validateUserName,
} from '../../../stores/citizen/validators';
import { validateAccountInformation } from '../../register/actions/registerActions';

export class ChangeNames extends PureComponent {
    static displayName = 'ChangeNames';

    static propTypes = {
        strings: PropTypes.shape().isRequired,
        submit: PropTypes.func.isRequired,
        fields: PropTypes.shape().isRequired,
        dirty: PropTypes.bool.isRequired,
        valid: PropTypes.bool.isRequired,
        resetForm: PropTypes.func.isRequired,
        handleSubmit: PropTypes.func.isRequired,
        style: PropTypes.shape().isRequired,
        // validateAccountInformation: PropTypes.func.isRequired,
    };


    render() {
        const {
            strings,
            submit,
            fields: {
                name,
                alias,
                userName,
            },
            dirty,
            valid,
            resetForm,
            handleSubmit,
            style,
        } = this.props;

        const styles = {
            root: {
                textAlign: 'center',
            },
            passwordButton: {
                float: 'right',
            },
            buttons: {
                margin: 10,
            },
            cardTitle: {
                fontSize: 20,
                fontWeight: 'normal',
                margin: '10px 0 20px',
                textAlign: 'center',
                textTransform: 'uppercase',
            },
        };

        return (
            <Paper
                style={{ ...styles.card, ...style }}
                zDepth={2}
                rounded={false}
            >
                <h2 style={styles.cardTitle}>{strings.title}</h2>

                <div style={styles.root}>

                    <form onSubmit={handleSubmit(submit)}>

                        <TextField
                            name="name"
                            value={name.value}
                            onChange={name.onChange}
                            floatingLabelText={strings.name}
                            errorText={name.dirty && name.invalid && name.error}
                            fullWidth
                        />

                        <TextField
                            name="alias"
                            value={alias.value}
                            onChange={alias.onChange}
                            floatingLabelText={strings.alias}
                            errorText={alias.touched && alias.error}
                            fullWidth
                        />

                        <TextField
                            name="userName"
                            value={userName.value}
                            onChange={userName.onChange}
                            floatingLabelText={strings.username}
                            errorText={userName.dirty && userName.invalid && userName.error}
                            fullWidth
                        />

                        <div>
                            <RaisedButton
                                style={styles.buttons}
                                type="button"
                                label={strings.cancel}
                                disabled={!dirty}
                                onClick={() => {
                                    resetForm();
                                }}
                            />
                            <RaisedButton
                                disabled={!valid || !dirty}
                                type="submit"
                                style={styles.buttons}
                                label={strings.save}
                                primary
                            />
                        </div>
                    </form>
                </div>
            </Paper>
        );
    }
}

export const asyncValidate = (values, dispatch, props) => new Promise(async (resolve, reject) => {
    const { name } = values;
    const res = await props.validateAccountInformation({ name });

    const { response: { nameValid } } = res;

    if (nameValid) {
        resolve();
    } else reject(nameValid);
});


export const validate = async (values, form) => {
    const errors = {};
    const { strings } = form;
    const { userName } = values;

    if (!validateUserName(userName)) {
        errors.userName = strings.username_invalid;
    }

    return errors;
};

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

const NamesForm = reduxForm({
    form: 'accountNames',
    fields: ['name', 'alias', 'userName'],
    validate,
    asyncValidate,
    asyncChangeFields: ['name'],
}, state => ({
    initialValues: {
        name: state.citizen.data.name,
        alias: state.citizen.data.alias,
        userName: state.citizen.data.userName,
    },
}))(ChangeNames);


export default connect(null, mapDispatchToProps)(NamesForm);