我有一个简单的以React- Redux为动力的表格。我希望有一个form.container.tsx和form.component.tsx,其中form.container.tsx保留了到redux状态减去Field的所有连接。我试图将我的容器包装在react- redux的connect中,然后将reduxForm包装在其中,使其看起来像TypeScript,redux- form和connect:
(理想)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 Integration的工作容器:
(无需reduxForm即可工作)form.container.tsx:
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)( DummyFormContainer );
而且我已经尝试了reduxForms和connect的不同变体,但所有这些都不起作用:
(带有类)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 );
./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;
并且组件是常规的React组件。
有谁知道如何正确连接reduxForm和react-redux的connect()?
我还遇到了这个问题,尝试按照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)