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

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

enter image description here

那么,如何包含类型定义以定义props.dispatch?只是寻求有关正确的TS定义的帮助。

最高

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

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

connect(mapStateToProps, mapDispatchToProps)

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将React.memo与react-redux连接一起使用?

无法获取与Webpack和Redux-React一起使用的提取模拟

将Typescript与React-Redux一起使用时出现类型错误

如何将选择输入类型与redux-form一起使用?

访问Saga中的store.dispatch以与React Router Redux一起使用

将Redux-Form与React-Redux Connect一起使用时出现TypeScript错误

将样式化的组件与props和Typescript一起使用

在将React与打字稿一起使用时,this.props.xxx是未定义的,但在ES5中可以正常工作吗?

将PropTypes与Redux组件一起使用

React Native组件没有从Redux获取this.props.dispatch

从Webpacker获取API无法与Rails + React一起使用

无法使React-redux与Redux-persist一起使用

将redux-persist与redux-immutable一起使用时出错

如何将getState与redux thunk一起使用

将Redux与React Native一起使用

将redux与react一起使用时使用defaultProps会发生什么?

在将Typescript与“ no-any”一起使用时,允许props.children为任意值:是吗?

为什么React Router无法与Redux一起使用?

React-redux:无法使用connect获取props的商店,无法读取未定义错误的属性'props'

如何将HOC与Redux Compose和Typescript一起使用

如何在React.memo中将Props与泛型一起使用

在React中将props与跨组件的样式化组件一起使用

无法将redux-devtools-extension与react-router-redux syncHistoryWithStore一起使用

反弹无法与React-Redux应用一起使用

将Webhook与Docusign一起使用-我可以获取自定义字段吗?

React Redux:使用来自 props 的数据还是直接从 redux-store 获取数据?哪一个更好?

如 react 官方文档中所述,将 Render Props 与 React.PureComponent 一起使用有什么问题?

如何将 redux props 和导航参数一起传递?

当 top Component 使用 ComponentDidMount 时,将 props 中的 state 与 Hooks 一起使用