获取 props.dispatch() 的类型定义，以便将 TypeScript 与 React-Redux 一起使用答案

【问题标题】：Get type definition for props.dispatch() for using TypeScript with React-Redux获取 props.dispatch() 的类型定义，以便将 TypeScript 与 React-Redux 一起使用
【发布时间】：2020-02-17 21:08:42
【问题描述】：

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

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);

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

那么我怎样才能包含类型定义以便定义 props.dispatch 呢？只是寻求有关正确 TS 定义的帮助。

【问题讨论】：

标签： reactjs typescript redux react-redux tsc

【解决方案1】：

请参阅React-Redux docs on "Static Typing"，它展示了如何为connect 将传递到您的组件的内容定义正确的类型。

具体来说，我们建议使用 ConnectedProps<T> 帮助器，如下所示：

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)

【讨论】：

【解决方案2】：

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

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

connect(mapStateToProps, mapDispatchToProps)

【讨论】：

是的，这是最好的解决方案。你可以用ReturnType<typeof mapDispatchToProps>，你不需要IDispatchProps
这是我的习惯。我总是手动描述接口 :) 也会尝试你的方式。泰:)
请注意，如果您使用的是 thunk，ReturnType<typeof mapDispatch> 方法并不总是有效，这就是为什么我们在我们的文档中特别推荐我在回答中展示的方法的原因之一。