React Redux with typescript

Question

I am learning react and typescript with redux. I have a child component like this:

import ...
interface MainTestProps {
   loadData: () => () => void,
   students: StudentsModel[],
   state: string,
   errorMessage?:string
}

interface MainTestState {
}

class MainTest extends React.Component<MainTestProps,MainTestState>{

constructor(props: MainTestProps, state: MainTestState){
    super(props,state);

}

.... rest of component
const mapStateToProps = (state:AppState, ownProps: MainTestProps)=> {
    return {
      students: [],
      state: 'INIT',
      errorMessage:''
    }
}
const mapDispatchToProps = (dispatch: any) => {
   return {
       loadData: () => dispatch(actionFetchStudents())
   }
}

export default connect(mapStateToProps,mapDispatchToProps) (MainTest);

Why if I call this component i receive the error Type '{}' is missing the following properties from type 'Readonly & MainTestProps>': loadData, students, state ts(2739). I mean I do not want to pass properties, I am using redux!!! Is there a bug in the typescript redux library or why I have to pass data or is my declaration of mapStateToProps wrong an I have to obmit the parameter ownProps.

Thank you all Arnold

Answer 1

Could you show how you are calling this MainTest component? Since you are only adding loadData through Redux, the other parameters students and state should still be passed to the component as a prop. The errorMessage prop is optional, so the transpiler does not complain about it.

The reason the transpiler complains about the loadData prop, is most likely because the type you supply in MainTestProps does not correspond to the type of the loadData function. I can only guess, since I don't have the actual implementation of actionFetchStudents, but it seems reasonable the type of loadData should be loadData: () => void;, instead of loadData: () => () => void;.

See if that works, otherwise please provide the implementations of actionFetchStudents and the function where you call MainTest.

Answer 2

interface State {}

interface OwnProps {}

interface DispatchProps {
    login: () => void;
}

interface StateProps {
    isFetching: boolean;
    accessToken: string;
}

type Props = StateProps & OwnProps & DispatchProps;

const ExampleTH = (props: Props): ReactElement => {

You can use something like this,this wirks with react 16.8.4