Компонент React Typescript неправильно отправляет избыточное действие

Question

Был преобразован проект из JavaScript в TypeScript. При нажатии кнопки входа в систему компонента onSumbit даже срабатывает, но действие приставки не отправляется. Ванильная JavaScript версия этого прекрасно работает. Проект компилируется нормально при сборке, без ошибок.

Файл TypeScript:

interface IErrors {
    email: string | undefined;
    password: string | undefined;
}

interface IUser {
    email: string;
    password: string;
}

interface IState {
    email: string;
    password: string;
    [key: string]: string;
}

interface IReduxProps {
    errors: IErrors;
}

interface IDispatchProps {
    loginUser: (user: IUser, history: any) => (dispatch: any) => Promise<any>;
    clearErrors: () => { type: string };
}

interface IProps extends IReduxProps {
    loginUser: (user: IUser, history: any) => (dispatch: any) => Promise<any>;
    clearErrors: () => { type: string };
}

export class Login extends React.Component<IProps, IState> {
    state = {
        email: '',
        password: '',
    };

    onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
        e.preventDefault();
        const user = {
            email: this.state.email,
            password: this.state.password,
        };
        this.props.loginUser(user, history);
    };

    onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        this.setState({ [e.target.name]: e.target.value });
    };

    componentWillUnmount() {
        this.props.clearErrors();
    }

    render() {
        return (
            <div className={styles.page}>
                <div className={styles.content}>
                    <h1 className={styles.title}>Login</h1>
                    <form className={styles.form} onSubmit={this.onSubmit}>
                        <div className={styles.inputGroup}>
                            <label className={styles.label} htmlFor="email">
                                Email
                            </label>
                            <input
                                className={classNames(styles.input, {
                                    [styles.inputError]:
                                        this.props.errors && this.props.errors.email,
                                })}
                                type="text"
                                name="email"
                                id="email"
                                value={this.state.email}
                                onChange={this.onChange}
                                autoComplete="email"
                            />
                            {this.props.errors && this.props.errors.email ? (
                                <p className={styles.error}>{this.props.errors.email}</p>
                            ) : null}
                        </div>
                        <div className={styles.inputGroup}>
                            <label className={styles.label} htmlFor="password">
                                Password
                            </label>
                            <input
                                className={classNames(styles.input, {
                                    [styles.inputError]:
                                        this.props.errors && this.props.errors.password,
                                })}
                                type="password"
                                name="password"
                                id="password"
                                value={this.state.password}
                                onChange={this.onChange}
                                autoComplete="password"
                            />
                            {this.props.errors && this.props.errors.password ? (
                                <p className={styles.error}>{this.props.errors.password}</p>
                            ) : null}
                        </div>
                        <button className={styles.button} type="submit">
                            Login
                        </button>
                    </form>
                    <Link className={styles.link} to="/register">
                        I need an account
                    </Link>
                </div>
            </div>
        );
    }
}

// TODO: change state to match redux state interface
const mapStateToProps = (state: any): IReduxProps => ({
    errors: state.errors,
});

const mapDispatchToProps = (): IDispatchProps => ({
    loginUser,
    clearErrors,
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

Действие приставки:

export const loginUser = (userData, history) => dispatch => {
    return axios
        .post('/api/login', userData)
        .then(res => {
            const { token, id } = res.data;
            localStorage.setItem('token', token);
            setAuthToken(token);
            dispatch({ type: 'LOGIN', payload: { id, token } });
            history.push('/dashboard');
            dispatch({ type: 'CLEAR_ERRORS' });
        })
        .catch(err =>
            dispatch({
                type: 'GET_ERRORS',
                payload: err.response.data,
            }),
        );
};

Любая помощь будет принята с благодарностью

Answer 1

Я думаю, это потому, что вы на самом деле нигде не используете "dispatch".

Добавьте bindActionCreators на вашу картуDispatchToProps

function mapDispatchToProps(dispatch: any, ownProps: IOwnProps): IDispatchProps {
  return bindActionCreators(
    {
       loginUser,
       clearErrors,
    },
    dispatch
  );
}

или вы можете использовать

const mapDispatchToProps = dispatch => {
  return {
    loginUser: (userData, history) => dispatch(loginUser(userData, history))
  }
}

Все это необходимо, поскольку вы используете «создателей действий»