使用TypeScript和React键入redux表单v7 [英] Typing redux forms v7 with TypeScript and React
问题描述
我有一个简单的反应 - 还原动力形式。我希望有一个form.container.tsx和一个form.component.tsx,其中form.container.tsx包含所有与redux状态的连接减去Field的连接。我正在尝试将我的容器包装在react-redux的connect中,然后将reduxForm包装在其中,看起来像 TypeScript,redux-form和connect :
I've got a plain react-redux-powered form. I wish for there to be a form.container.tsx and a form.component.tsx, where form.container.tsx holds all the connections to redux state minus the Field's. I'm trying to wrap my container in react-redux's connect and then wrapping reduxForm within it to look something like TypeScript, redux-form and connect:
(理想)form.container.tsx:
(ideal) form.container.tsx:
interface DummyFormContainerProps {}
export const DummyFormContainer: React.SFC<DummyFormContainerProps> = props => {
const submitForm = (formValues: object) => {
alert(formValues);
};
return (
<DummyForm
onSubmit={submitForm}
/>
);
};
const mapStateToProps = (state: State) => ({});
const mapDispatchToProps = (dispatch: object) => {
return {};
};
const mergeProps = (stateProps: State, dispatchProps: object | null, ownProps: object | void) =>
Object.assign({}, stateProps, dispatchProps, ownProps);
const formConfiguration = {
form: 'dummy-form',
forceUnregisterOnUnmount: true
};
export default connect(mapStateToProps, mapDispatchToProps)(
reduxForm(formConfiguration)(DummyFormContainer)
);
以上不起作用,但如果我拿出reduxForm()部分,我就离开了使用没有reduxForm集成的工作容器:
The above does not work, but if I take out the reduxForm() part, I'm left with a working container with no reduxForm Integration:
(不使用reduxForm)form.container.tsx:
(working without reduxForm) form.container.tsx:
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(
DummyFormContainer
);
我尝试使用reduxForms和connect进行不同的变化,目前都没有工作:
And I've tried different variations with reduxForms and connect, all not currently working:
(带类)form.container.tsx:
(with classes) form.container.tsx:
export class DummyFormContainer extends React.Component<DummyFormContainerProps, void> {
submitForm = (formValues: object) => {
alert(formValues);
}
render() {
return (
<DummyForm
onSubmit={this.submitForm}
/>
);
}
}
const mapStateToProps = (state: State) => ({});
const mapDispatchToProps = (dispatch: object) => {
return {};
};
const mergeProps = (stateProps: State, dispatchProps: object | null, ownProps: object | void) =>
Object.assign({}, stateProps, dispatchProps, ownProps);
const formConfiguration = {
form: 'business-registration',
};
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(
reduxForm(formConfiguration)(DummyFormContainer) // ERROR
);
错误:
./src/modules/dummy-form/dummy-form.container.tsx
(100,32): error TS2345: Argument of type 'typeof DummyFormContainer' is not assignable to parameter of type 'ComponentType<InjectedFormProps<{}, {}>>'.
Type 'typeof DummyFormContainer' is not assignable to type 'StatelessComponent<InjectedFormProps<{}, {}>>'.
Type 'typeof DummyFormContainer' provides no match for the signature '(props: InjectedFormProps<{}, {}> & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.
(使用无状态功能组件)form.container.tsx:
(with stateless functional components) form.container.tsx:
export const DummyFormContainer: React.SFC<DummyFormContainerProps> = props => {
const submitForm = (formValues: object) => {
alert(formValues);
};
return (
<DummyForm
onSubmit={submitForm}
/>
);
};
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(
reduxForm(formConfiguration)(DummyFormContainer) // ERROR
);
错误:
./src/modules/dummy-form/dummy-form.container.tsx
(100,3): error TS2345: Argument of type 'DecoratedComponentClass<{}, Partial<ConfigProps<{}, {}>>>' is not assignable to parameter of type 'ComponentType<(State & null & void) | (State & null & object) | (State & object & void) | (State ...'.
Type 'DecoratedComponentClass<{}, Partial<ConfigProps<{}, {}>>>' is not assignable to type 'StatelessComponent<(State & null & void) | (State & null & object) | (State & object & void) | (S...'.
Type 'DecoratedComponentClass<{}, Partial<ConfigProps<{}, {}>>>' provides no match for the signature '(props: (State & null & void & { children?: ReactNode; }) | (State & null & object & { children?: ReactNode; }) | (State & object & void & { children?: ReactNode; }) | (State & object & { children?: ReactNode; }), context?: any): ReactElement<any> | null'.
form.component.tsx如下所示:
The form.component.tsx looks like this:
import * as React from 'react';
import Input from '../../components/input';
interface DummyFormProps {
onSubmit: (formValues: object) => void
}
export const DummyForm: React.SFC<DummyFormProps> = () => {
return (
<div>
<h1>DummyForm (no state)</h1>
<form>
<Input inputType="primary" />
</form>
</div>
);
};
export default DummyForm;
< Input> component是一个常规的React组件。
And the < Input > component is a regular React component.
有谁知道如何正确连接reduxForm和react-redux的connect()?
Does anyone know how to properly connect reduxForm and react-redux's connect()?
推荐答案
我也遇到了这个问题,尝试从redux状态初始化我的表单,按照 https://redux-form.com/7.0.4/examples/initializefromstate/
I also ran into this issue trying to initialise my form from redux state, as per the example in https://redux-form.com/7.0.4/examples/initializefromstate/
我最终通过连接更高级别的组件来解决这个问题,例如:
I ended up getting around it by connecting the component at a higher level, eg:
component.tsx:
component.tsx:
interface DummyFormComponentProps {} extends InjectedFormProps
const DummyFormComponent: React.SFC<DummyFormComponentProps> = props => {
return (
<form onSubmit={props.handleSubmit}>
// Fields go here
</form>
)
}
export const DummyForm = reduxForm({
form: "dummy-form"
})(DummyFormComponent)
// Trying to connect here also gave errors with DecoratedComponentClass
container.tsx:
container.tsx:
interface DummyFormContainerProps {} extends Pick<InjectedFormProps,
"initialValues"
>
const submitForm = (formValues: object) => {
alert(formValues);
};
const DummyFormContainer: React.SFC<DummyFormContainerProps> = props => {
return (
<DummyForm
initialValues={props.initialValues}
onSubmit={submitForm}
/>
)
}
const mapStateToProps = (state: State) => ({
initialValues: {}
});
const mapDispatchToProps = (dispatch: object) => {
return {};
};
export default connect(mapStateToProps, mapDispatchToProps)(DummyFormContainer)
这篇关于使用TypeScript和React键入redux表单v7的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!