web-dev-qa-db-ja.com

Reduxフォームの小道具とタイプスクリプト

何年も探していましたが、価値のあるものは見つかりませんでした。

フローで作業しているとき、私は簡単に次のことができました。

import { type FieldProps, FormProps } from 'redux-form';

Typescriptでpropをredux形式に適切に設定するための同様の（そして簡単な）方法はありますか？

ドキュメントはTypeScriptについて何も言っていません。フローのタイピング用のページしかありません。

ただし、redux-formからpropTypesのようなものをインポートできることがわかりました。

import { reduxForm, propTypes } from 'redux-form'

しかしながら - redux-formにはpropTypesのようなものがエクスポートされていないため、ドキュメントは推奨されません。

リンク： https://redux-form.com/7.2.1/docs/api/props.md/

何らかの助けを事前に感謝します。

tl;dr class RegistrationForm extends React.PureComponent<any> {
                                      what to drop here ^^^^^
javascriptreactjstypescriptredux-formdefinitelytyped
8
Patrickkx

パッケージマネージャで_@types/redux-form_パッケージをインストールする必要があります。 _@types/redux-form_パッケージには、_redux-form_パッケージの型定義が含まれています。

次に、_redux-form_から型定義をインポートできます（例：InjectedFormProps）。

reduxForm()でラップされるフォームには、_InjectedFormProps<FormData = {}, P = {}>_を拡張する小道具が必要です。

reduxForm()タイプはジェネリック_reduxForm<FormData = {}, P = {}>(..._

例を参照してください。

_import * as React from 'react';
import { reduxForm, InjectedFormProps, Field } from 'redux-form';

import { IUser } from './index';

interface IProps {
  message: string;
}

class UserForm extends React.Component<InjectedFormProps<IUser, IProps> & IProps> {
  render() {
    const { pristine, submitting, reset, handleSubmit, message } = this.props;
    return (
      <form onSubmit={handleSubmit}>
        <div>{message}</div>
        <div>
          <label>First Name </label>
          <Field
            name="firstName"
            component="input"
            type="text"
            placeholder="First Name"
          />
        </div>
        <div>
          <label>Last Name </label>
          <Field
            name="lastName"
            component="input"
            type="text"
            placeholder="Last Name"
          />
        </div>
        <div>
          <button type="submit" disabled={pristine || submitting}>
            Submit
          </button>
          <button type="button" disabled={pristine || submitting} onClick={reset}>
            Clear Values
          </button>
        </div>
      </form>
    );
  }
}

export default reduxForm<IUser, IProps>({
  form: 'userForm',
})(UserForm);
_

Edit Redux Form + TypeScript example

_@types/redux-form_パッケージのソースコードは here にあります。型のチェックに使用される redux-form-tests.tsx ファイルで、そこにある型とより複雑な例を確認できます。

15
Anton Novik