J'ai un formulaire simple réagissant-redux. Je souhaite qu'il y ait un form.container.tsx et un form.component.tsx, où form.container.tsx contient toutes les connexions à l'état redux moins les champs. Je suis en train d'envelopper mon conteneur relient Réagissons-redux puis envelopper reduxForm à l'intérieur pour regarder quelque chose comme TypeScript, redux-form and connect:Typing redux forms v7 avec TypeScript et React
(idéal) 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)
);
Le ci-dessus ne fonctionne pas , mais si je prends la partie reduxForm(), je suis parti avec un récipient de travail sans intégration reduxForm:
(travail sans reduxForm) form.container.tsx:
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(
DummyFormContainer
);
Et j'ai essayé différentes variations avec reduxForms et de connexion, tout ne fonctionne pas actuellement:
(avec des 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
);
erreur:
./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'.
(avec des composants fonctionnels sans état) 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
);
err ou:
./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'.
Le form.component.tsx ressemble à ceci:
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;
Et l'entrée <> composant est un composant régulier React.
Est-ce que quelqu'un sait comment connecter correctement reduxForm et connect-redux's connect()?
où placer ce fichier de type soit au niveau racine du projet, soit dans le dossier node_modules –
Nous l'avons simplement placé dans src/typings/redux-forms.d.ts. Nous avons utilisé create-react-app avec les scripts Typescript de Microsoft. N'a pas modifié le package.json pour faire quoi que ce soit donc je crois que TypeScript ne fait que sélectionner des éléments dans le dossier src/et lire le mot-clé 'declare'. –
quand je fais comme vous le dites. J'ai fait face à cette erreur ci-dessous. D: \ repositories \ tsproj \ reactjs-ts-form-demo \ modules_noeud \ @types \ redux-form \ lib \ selectors.d.ts (1,10): erreur TS2305: Module '' redux-form '' 'n'a aucun membre exporté' FormErrors '. Mes dépendances sont: https://jsfiddle.net/mglrahul/9qrn6gbn/1/ –