Ожидается 0 аргументов, но получено 1

Question

Мне нужна помощь в реализации избыточности в моем приложении реакции. Не удалось скомпилировать Typescript со следующей ошибкой:

Ошибка TypeScript в /Users/XXXXXXX/SignIn/index.tsx(12,71): ожидалось 0 аргументов, но получено 1. TS2554

Вот мой файл index.tsx:

import SignIn from "./SignIn";
//@ts-ignore
import { connect } from "react-redux";
import { compose } from "redux";
import { withRouter } from "react-router-dom";
import { signIn } from "../../ducks/user";

const mapDispatchToProps = (dispatch: any) => ({
  signIn: (form: any) => dispatch(signIn(form))
});

export default compose(withRouter, connect(null, mapDispatchToProps))(SignIn);

Спасибо, ребята, что помогли

Answer 1

export default compose(withRouter, connect(null, mapDispatchToProps))(SignIn);

Переместите connect HO C, чтобы быть последней составной функцией (т.е. первой в списке аргументов). Составьте процессы функций справа налево. Вам нужно, чтобы это был последний возвращенный товар. Это легче увидеть при составлении списка составления HO C по вертикали.

export default compose(
  connect(null, mapDispatchToProps),
  withRouter,
)(SignIn);

Edit Просто проведите некоторое тестирование с этим и убедитесь, что если отдельный декоратор не зависит от введенных реквизитов от других ранее указанные декораторы тогда порядок не имеет значения.

Например, я использую redux и intl в проекте, если я просто сочиняю и деструктурирую formatMessage из intl

const MyComponent = ({ intl: { formatMessage } }) => <div>TEST</dev>;

любой из следующих работ

export default compose(
  connect(mapStateToProps),
  injectIntl,
)(MyComponent);

и

export default compose(
  injectIntl,
  connect(mapStateToProps),
)(MyComponent);

Но если я попытаюсь сопоставить intl.formatMessage с formatMessage реквизитом, то порядок имеет значение.

const MyComponent = ({ formatMessage }) => <div>TEST</dev>;

const mapStateToProps = (state, { intl }) => ({
  formatMessage: intl.formatMessage,
});

// only this order works.
export default compose(
  injectIntl,
  connect(mapStateToProps),
)(MyComponent);

Надеюсь, это заполнит некоторые пробелы.