TypeScript, React, Reduxで, reduxFormの実装について

Question

前提・実現したいこと

TypeScript, React, Redux で、emailとpasswordを入力してログインする、というフォームを作っています。
redux-formを用いて作成しています。

(仕様といたしましては、emailとpasswordを入力　→　Submitする　→　入力データを受け取った非同期ActionCreaterをdispatch)　

発生している問題・エラーメッセージ

handleSubmitについてです。
reduxFormで該当のコンポーネントをdecolateすれば、
そのコンポーネントは、propsでhandleSubmitを受け取ると理解しています。

ですが、VScode上は「プロパティ 'handleSubmit' は型 '{ children?: ReactNode; }' に存在しません」と表記されていて、VScodeのエラーなのか、自分が間違っているのかわかりません。

const handleSubmit: any
プロパティ 'handleSubmit' は型 '{ children?: ReactNode; }' に存在しません。ts(2339)

該当のソースコード

以下は該当のログインフォームです。
非同期ActionCreaterを外部から呼び出していますが、本件とはあまり関係ないと感じます。

import React from 'react';
import { Field, formValues, reduxForm } from 'redux-form';
import { login } from '../modules/ActionCreater'  // 非同期ActionCreater　外部ファイル
import { useDispatch } from 'react-redux'

type formValues = {
  email: string;
  password: string;
}

const Login: React.FC = (props) => {
  const dispatch = useDispatch()





  // ここでhandleSubmitに赤の下線、エラーメッセージ
  // propsでどうして受け取れないのでしょうか...？
  const { handleSubmit } = props





  const renderInput = (field: { input: any; label: any; }) => {
    const { input, label } = field
    return( 
      <div>
        <input {...input} placeholder={label}/>
      </div>
    );
  }




  // onSubmitは入力データを受け取り、
  // 非同期ActionCreaterに渡して、非同期ActionCreaterをdispatchする
  const onSubmit = (formValues: formValues) => {
    dispatch(login(formValues))
  }



  return (
    <div>
      <h1>サインイン</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div><Field label="email" name="email" type="text" component={renderInput} /></div>
        <div><Field label="password" name="password" type="text" component={renderInput} /></div>
        <div>
          <button type="submit">ログイン</button>
        </div>
      </form>
    </div>
  )
   
  
}

export default reduxForm({ form: 'loginForm' })(Login);

reduxFormのpropsの型はVScodeでは反映されない、を疑っているのですが、、、
どうかよろしくお願いいたします。

Answer 1

試してませんが、InjectedFormProps ってのを使えば良いかも？
参考: javascript - Redux form props & typescript - Stack Overflow

-import { Field, formValues, reduxForm } from 'redux-form';
+import { Field, formValues, reduxForm, InjectedFormProps } from 'redux-form';
 
-const Signin: React.FC = (props) => {
+const Signin: React.FC<InjectedFormProps<formValues>> = (props) => {
 
-export default reduxForm({ form: 'loginForm' })(Signin);
+export default reduxForm<formValues>({ form: 'loginForm' })(Signin);

追加のプロパティがある場合。

type ExtraProps = {
  extra: string;
};

const Signin: React.FC<ExtraProps & InjectedFormProps<formValues, ExtraProps>> = (props) => {

export default reduxForm<formValues, ExtraProps>({ form: 'loginForm' })(Signin);

Comments

[gemuou]

ご丁寧にありがとうございました。
importしたredux-formには、reduxFormでdecorateしたときに渡されるpropsの、型を定義してくれているInjectedFormPropsという変数(interface InjectedFormProps{ // handleSubmitの型やprinstineの型 })が入っているのですね。勉強になりました。ありがとうございました。