Ошибки TypeScript при использовании Redux-Form с React-Redux connect

Question

Ошибки TypeScript при использовании Redux-Form с React-Redux connect

4

Я влюбился в TypeScript, пока не нашел очень обескураживающие несовместимости между Redux-Form с React-Redux.

Моя цель состоит в том, чтобы украсить украшенный компонент reduxForm с помощью декоратора decor-redux connect - этот шаблон всегда работал у меня в конфигурациях Babel и, как представляется, после HOC. Вот пример:

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

interface SampleFormData {
  username: string;
}

interface SampleFormProps {
  saveData: (data: SampleFormData) => void;
}

type AllSampleFormProps = SampleFormProps & InjectedFormProps<SampleFormData>;

const SampleForm: React.SFC<AllSampleFormProps> = (props) => (
  <form onSubmit={props.handleSubmit(props.saveData)}>
    <Field name="username" component="input" />
  </form>
);

const DecoratedSampleForm = reduxForm<SampleFormData>({ form: "sampleForm" })(SampleForm);

export default connect(
  () => ({}),
  (dispatch) => ({
    saveData: (data: SampleFormData) => dispatch({ type: "SAVE_DATA", data })
  })
)(DecoratedSampleForm);

Здесь ошибки TypeScript бросают:

> Argument of type 'DecoratedComponentClass<SampleFormData,
> Partial<ConfigProps<SampleFormData, {}>>>' is not assignable to
> parameter of type 'ComponentType<{ saveData: (data: SampleFormData) =>
> { type: string; data: SampleFormData; }; }>'.
> 
> Type 'DecoratedComponentClass<SampleFormData,
> Partial<ConfigProps<SampleFormData, {}>>>' is not assignable to type
> 'StatelessComponent<{ saveData: (data: SampleFormData) => { type:
> string; data: SampleFormData; };...'.
> 
> Type 'DecoratedComponentClass<SampleFormData,
> Partial<ConfigProps<SampleFormData, {}>>>' provides no match for the
> signature '(props: { saveData: (data: SampleFormData) => { type:
> string; data: SampleFormData; }; } & { children?: ReactNode; },
> context?: any): ReactElement<any>'.

Кто-нибудь нашел решение, чтобы make-redux принял тип DecoratedComponentClass? Я нашел предложение для использования "среднего" компонента, но мне не удалось заставить его работать с действиями thunk. Плюс я обнаружил, что это создает больше проблем, чем решает вопрос о наборе форм.

Tom McKinney 28 сен. 2017, в 22:50

Источник

2

Есть ли примеры TypeScript + redux-form v7?
Manoj Govindan 05 окт. 2017, в 13:27
0

@ManojGovindan codesandbox.io/s/myoynq411j
ryanrain 18 апр. 2018, в 02:44

Теги:

reactjs

typescript

react-redux

redux

redux-form

1 ответ

Ещё вопросы

Tom McKinney · Accepted Answer · 2017-09-29T13-45-00.000Z

Для всех, кто сталкивается с этим, я обнаружил, что я смог отклонить ошибку, предоставив инструкцию connect с пустыми объектами TStateProps и TDispatchProps.

interface SampleFormData {
  username: string;
}

interface SampleFormProps {
  saveData: (data: SampleFormData) => void;
}

type AllSampleFormProps = SampleFormProps & InjectedFormProps<SampleFormData>;

const SampleForm: React.SFC<AllSampleFormProps> = (props) => (
  <form onSubmit={props.handleSubmit(props.saveData)}>
    <Field name="username" component="input" />
  </form>
);

const DecoratedSampleForm = reduxForm<SampleFormData>({ form: "sampleForm" })(SampleForm);

export default connect<{},{}>(
  () => ({}),
  (dispatch) => ({
    saveData: (data: SampleFormData) => dispatch({ type: "SAVE_DATA", data })
  })
)(DecoratedSampleForm);

Единственным недостатком этого является то, что он заставляет нас слепо поставлять реквизиты подключения, но я чувствовал, что это было более элегантное решение, чем запись переопределяющего объявления @types.

Чтобы устранить этот недостаток, я смог проверить типы, установив соединение с правильными интерфейсами против пустых объектов; однако этот метод может быть выполнен только временно, чтобы проверить привязки, поскольку он не разрешает ошибку DecoratedComponentClass.

export default connect<{}, SampleFormProps, InjectedFormProps<SampleFormData>>(
  () => ({}),
  (dispatch) => ({
    saveData: (data: SampleFormData) => dispatch({ type: "SAVE_DATA", data })
  })
)(DecoratedSampleForm);

первый рабочий пример, который я нашел, чтобы заставить его работать с машинописью вообще ... вы должны опубликовать суть с вашим примером