reactjs – 使用Redux-Form与React-Redux连接时的TypeScript错误

发布时间：2020-12-15 20:15:54 所属栏目：百科来源：网络整理

导读：我爱上了TypeScript,直到我发现Redux-Form与React-Redux之间存在一些非常令人沮丧的不兼容性. 我的目标是使用react-redux连接装饰器包装一个reduxForm装饰组件 – 这种模式在babel配置中一直适用于我,并且似乎遵循HOC方法.这是一个例子： import * as React

我爱上了TypeScript,直到我发现Redux-Form与React-Redux之间存在一些非常令人沮丧的不兼容性.

我的目标是使用react-redux连接装饰器包装一个reduxForm装饰组件 – 这种模式在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,{}>>>' is not assignable to type
> 'StatelessComponent<{ saveData: (data: SampleFormData) => { type:
> string; data: SampleFormData; };...'.
> 
> Type 'DecoratedComponentClass<SampleFormData,{}>>>' provides no match for the
> signature '(props: { saveData: (data: SampleFormData) => { type:
> string; data: SampleFormData; }; } & { children?: ReactNode; },> context?: any): ReactElement<any>'.

有没有人找到使react-redux接受DecoratedComponentClass类型的解决方案？我找到了一个使用“中间”组件的suggestion,但我还没有设法让它与thunk动作一起使用.另外我发现这会产生更多的问题,而不是在键入表单的道具方面解决的问题.

解决方法

对于遇到此问题的任何人,我发现通过为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<{},{}>(
  () => ({}),data })
  })
)(DecoratedSampleForm);

这样做的一个缺点是它迫使我们盲目地提供连接道具,但我觉得这是一个比写一个覆盖@types声明更优雅的解决方案.

为了解决这个缺点,我能够通过提供正确的接口与空对象的连接来验证类型;但是,此方法只能临时完成以检查绑定,因为它不解析DecoratedComponentClass错误.

export default connect<{},SampleFormProps,InjectedFormProps<SampleFormData>>(
  () => ({}),data })
  })
)(DecoratedSampleForm);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!