Action<Promise<any>>' is not assignable to parameter of type 'MapDispatchToPropsParam<DispatchProps, any>'

Viewed 1035

I am using react-redux with typescript But i am getting error in connect method.

ERROR in [at-loader] ./src/components/BodyCmp.tsx:43:73 TS2345: Argument of type '(dispatch: any) => () => Action>' is not assignable to parameter of type 'MapDispatchToPropsParam'. Type '(dispatch: any) => () => Action>' is not assignable to type 'MapDispatchToPropsFactory'. Type '() => Action>' is not assignable to type 'MapDispatchToProps'. Type '() => Action>' is not assignable to type 'MapDispatchToPropsFunction'. Type 'Action>' is not assignable to type 'DispatchProps'. Property 'fetchData' is missing in type 'Action>'.

ERROR in [at-loader] ./src/index.tsx:18:17 TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> & R...'. Type '{}' is not assignable to type 'Readonly'. Property 'data' is missing in type '{}'. webpack: Failed to compile.

Code is as below, Thanks in advance.

action.ts
---------------
export interface Action<T>{
    type:string;
    payload: T;
}


BodyCmp.tsx
------------------

import * as React from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import {fetchData} from "../Actions/userData"; 
import {store} from "../store/store";
import {Action} from "../models/action";

interface StateProps {
    data:Array<{}>;
}
interface DispatchProps {
  fetchData():Action<Promise<any>>;
}
type bodyProps = StateProps & DispatchProps;



function mapStateToProps(state:any):StateProps{
    return {
          data:state.dataReducer.data
    };
}

function mapDispatchToProps(dispatch:any){
  return bindActionCreators(fetchData, dispatch)
}


export class BodyCmp extends React.Component<bodyProps,any>{
    componentDidMount() {
        this.props.fetchData();
    }

    render(){
     console.log(this.props);
        return(
            <div>
                <h1>Bodyyyy</h1>
            </div>
        )
    }
}
export default connect<StateProps, DispatchProps, any>(mapStateToProps, mapDispatchToProps)(BodyCmp);
0 Answers
Related