TypeXとReactを使ってreduxフォームv7を入力

Question

私は単純な反応還元型のフォームを持っています。 form.container.tsxとform.component.tsxが存在することを願っています。ここで、form.container.tsxは、redux状態からFieldを差し引いたすべての接続を保持しています。 （理想）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) 
); 

以上が動作しません私はのは、接続してから、TypeScript, redux-form and connectのようなものを見て、その中にreduxFormを包む反応-Reduxの中で私の容器をラップしようとしています

（reduxFormなく動作）form.container.tsx：

export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(
    DummyFormContainer 
); 

私はreduxForm（）の部分を取り出した場合、しかし、私はノーreduxFormの統合と作業コンテナに残されています

そして、私はreduxFormsでさまざまなバリエーションを試してみましたが、接続し、すべての現在働いていませんでした：

（クラスで）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：

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または：

./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は次のようになります。

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; 

そして<入力>コンポーネントは、通常のリアクトコンポーネントです。

誰もreduxFormとreact-reduxのconnect（）を正しく接続する方法を知っていますか？

Reduxの-forms.d.ts：私たちがやってしまったことは私たちの目を閉じて、型宣言ファイルでデフォルトのタイプを上書きすることでした

Answer 1

私もこの問題に遭遇しましたhttps://redux-form.com/7.0.4/examples/initializefromstate/

に例に従って、Reduxの状態から自分のフォームを初期化しようとしている私は、例えば、より高いレベルでのコンポーネントを接続することにより、その周りになってしまった：

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：

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) 

Answer 2

declare module 'redux-form' { 
    type anyProps = { [key: string]: {} } 
    function Field(): React.Component<anyProps>; 
    function reduxForm({}): <T>(c: T) => T 
    function reducer(): object 
    interface SubmissionError { 
    new(error?: {}) : Error; 
    } 
    function getFormValues(formName: string): (formName: {}) => {} 
    function stopSubmit(formName: string, errorObject?: {}): any 
    function isSubmitting(formName: string): any 
    function setSubmitFailed(formName: string): any 
    function setSubmitSucceeded(formName: string): any 
    function touch(formName: string): any 
    function clearSubmitErrors(formName: string): any 
    function getFormMeta(formName: string, ...fields: string[]): (state: {}) => {} 
    function getFormSyncErrors(formName: string): (state: {}) => {} 
    function getFormSubmitErrors(formName: string): (state: {}) => {} 
    function getFormNames(): any 
} 

Answer 3

は私が空TStatePropsとTDispatchPropsオブジェクトとconnect文を提供することにより、エラーを消すことができたことがわかりました。

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); 

この1つの欠点は、それが盲目的に接続小道具を供給するために私たちを強制的に私は、これはオーバーライド@types宣言を書くよりも、よりエレガントな解決策だと感じたということです。

この欠点に対処するために、私は空のオブジェクトに対して正しいインターフェイスで接続することで型を検証できました。ただし、このメソッドは、DecoratedComponentClassエラーを解決しないため、バインディングをチェックするために一時的にしか実行できません。

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

Answer 4

私は同じ問題を抱えていたし、それは「タイプ@ /反応-Reduxのを」によって引き起こされた見つけ、このタイプ定義ファイルとすべてのものを削除するには、あなたが他の副作用/タイプエラーなしにそれを期待するように動作しますその型defファイルを持たないことが原因です。