Reactjs 获取props.dispatch（）的类型定义，以便将TypeScript与React Redux一起使用

我有一个功能性/无状态组件：

import React from 'react';
import {useFormik} from 'formik';
import {connect} from "react-redux";

function mapStateToProps(){
  return {
     foo: "bar"
  }
}

interface OwnProps {
  propFromParent: number
}


type StateProps = ReturnType<typeof mapStateToProps>
type Props = StateProps & OwnProps


const SignupForm = (props: Props) => {


  const formik = useFormik({
    initialValues: {
      email: '',
      name: '',
      password: ''
    },
    onSubmit(values) {
      props.dispatch()   // props.dispatch is not defined!
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="name">Full Name</label>
      <input
        id="name"
        name="name"
        type="name"
        onChange={formik.handleChange}
        value={formik.values.name}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default connect<StateProps, null, Props>(mapStateToProps)(SignupForm);

从“React”导入React；
从'formik'导入{useFormik}；
从“react redux”导入{connect}；
函数mapStateToProps（）{
返回{
傅：“酒吧”
}
}
界面道具{
propFromParent:编号
}
类型StateProps=ReturnType
类型Props=StateProps&OwnProps
const SignupForm=（道具：道具）=>{
常数formik=useFormik({
初始值：{
电子邮件：“”，
名称：“”，
密码：“”
},
onSubmit（值）{
props.dispatch（）//未定义props.dispatch！
}
});
返回(
全名
提交
);
};
导出默认连接（MapStateTops）（注册表）；

所以我得到了这个编译错误：

那么如何包含类型定义以便定义props.dispatch呢？

---

只是想获得有关正确TS定义的帮助。

您需要添加一个新函数，并将其作为第二个参数传递给connect（）

...
function mapDispatchToProps(dispatch): IDispatchProps {
 return {
  dispatch
 };
}

connect(mapStateToProps, mapDispatchToProps)

请参阅，其中显示了如何为

connect

将传递到组件中的内容定义正确的类型

具体而言，我们建议使用

ConnectedProps

helper，如下所示：

import { connect, ConnectedProps } from 'react-redux'

interface RootState {
  isOn: boolean
}

const mapState = (state: RootState) => ({
  isOn: state.isOn
})

const mapDispatch = {
  toggleOn: () => ({ type: 'TOGGLE_IS_ON' })
}

const connector = connect(
  mapState,
  mapDispatch
)

// The inferred type will look like:
// {isOn: boolean, toggleOn: () => void}
type PropsFromRedux = ConnectedProps<typeof connector>

interface Props extends PropsFromRedux {
  backgroundColor: string
}

const MyComponent = (props: Props) => (
  <div style={{ backgroundColor: props.backgroundColor }}>
    <button onClick={props.toggleOn}>
      Toggle is {props.isOn ? 'ON' : 'OFF'}
    </button>
  </div>
)

export default connector(MyComponent)

从'react redux'导入{connect，ConnectedProps}
接口根状态{
伊森：布尔
}
常量映射状态=（状态：根状态）=>({
伊森：state.isOn
})
常量映射分派={
toggleOn:（）=>（{type:'TOGGLE_IS_ON'}）
}
常数连接器=连接(
mapState，
地图发送
)
//推断的类型如下所示：
//{isOn:boolean，toggleOn:（）=>void}
类型PropsFromRedux=ConnectedProps
接口道具扩展了PropsFromRedux{
背景颜色：字符串
}
常量MyComponent=（道具：道具）=>(
切换为{props.isOn？'ON'：'OFF'}
)
导出默认连接器（MyComponent）

是的，这是最好的解决方案。你可以使用

ReturnType

，你不需要

IDispatchProps

这是我的习惯。我总是手动描述接口：）也将尝试您的方式。Ty:）请注意，如果您使用thunks，则返回类型

ReturnType

方法并不总是有效，这也是我们在我的回答中所示的文档中特别推荐该方法的原因之一。