Typescript, Redux - Установить тип для DISPATCH

Question

Это, должно быть, самая раздражающая вещь, с которой я когда-либо сталкивался.

Как же я могу установить тип для отправки в реакции / редукции / машинописи? Ниже приведен фрагмент кода:

class MyComponent extends Component<StateFromProps> { // Do I need a <..., DispatchFromProps> here?
  ...
  const mapStateToProps = (state: StateFromProps) => {
    return {
      counter: state.counter
    }
  }

  const mapDispatchToProps = (dispatch) => {
    return {
      onAddCounter: (amount: number) => dispatch({ type: 'ADD_COUNTER', value: amount })
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

Несколько строк выше, я определил интерфейсы для состояния и отправки. Кажется, это работает для государства, но не для отправки.

interface StateFromProps {
  counter: number
}

interface DispatchFromProps {
  onAddCounter: () => void  // I can't get this part right. I am getting errors about call signatures etc.
}

Я хотел бы отправить действия следующим образом:

this.props.onAddCounter(5)  // ERROR: Property 'onAddCounter' does not exist on type 'Readonly<StateFromProps>'...

Answer 1

Кажется, что это почти работает:

Проблема : Component<T>, кажется, принимает только первый аргумент.

class MyComponent extends Component<StateFromProps, DispatchFromProps> {
  ...
}

Я могу получить доступ State когда StateFromProps является первым параметром типа, переданным Component.

Когда DispatchFromProps является вторым аргументом, весь код Dispatch breaks.

Если я изменю порядок и поставлю DispatchFromProps первым, код Dispatch сработает, но весь код State сломается.

Как правильно использовать несколько типов для Component