Question

这必须是我处理过的最烦人的事情。

究竟如何在react / redux / typescript中为调度设置类型？下面的代码段：

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是 second 参数时，所有Dispatch代码都会中断。

如果我更改顺序并首先放置DispatchFromProps，则Dispatch代码有效，但是所有State代码都会中断。

如何为Component正确使用多种类型？

Typescript，Redux-设置DISPATCH的类型

1 个答案: