Dispatch not a function React Redux Typescript

Question

Having trouble accessing redux dispatch method inside of props. When calling handleSubmit from the redux-form, the dispatch method returns "dispatch is not a function".

I've tried adding the action to various interfaces that I was passing into the component. The order of the parameters I'm passing into connect looks correct, as well as the syntax I'm using to pass in the action to the interfaces being passed to the component.

PropsFromDispatch contains the loginRequest action, which I'm mapping to props in the MapDispatchToProps method.

export interface IAppProps {
  loggingIn: any;
}

export interface IAppState {
  user: GetTokenRequest;
  submitted: boolean;
  validate: {
    emailState:string
  }

}

interface PropsFromDispatch {
  loginRequest: (username: string, password:string) => void;
}

type AllProps = IAppProps & PropsFromDispatch & ConnectedReduxProps & 
IAppState

export default class LoginPage extends React.Component<AllProps, IAppState, 
PropsFromDispatch> {
  constructor(props: AllProps) {
    super(props);

    this.state = this.getInitState();

    this.handleUserNameChange = this.handleUserNameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  private getInitState(): IAppState {


  //Where I'm getting the error
  handleSubmit(e: { preventDefault: () => void; }) {
    e.preventDefault();

    this.setState({ submitted: true });
    const { username, password } = this.state;
    const {dispatch} = this.props
    if (username && password) {
       this.props.loginRequest(username, password)
       //have also tried 
       dispatch(loginRequest(username,password))
    }
  }


render() {
    const {loggingIn} = this.props
    const {username, password} = this.state;
    return (
      <Container>
        <h3>Sign In</h3>
        <Form>
          <Col>
            <FormGroup>
              <Label>Username</Label>
              <Input
                name="email"
                id="exampleEmail"
                placeholder="firstname.lastname"
                value={ username }

                onChange={ (e) => {this.handleUserNameChange(e)} } />
              <FormFeedback valid>
                Valid Username
              </FormFeedback>
              <FormFeedback>
                Invalid UserName
              </FormFeedback>
              <FormText>Windows Login</FormText>
            </FormGroup>
          </Col>
          <Col>
            <FormGroup>
              <Label for="password">Password</Label>
              <Input
                type="password"
                name="password"
                id="password"
                placeholder="********"
                value={ password }
                onChange={ (e) => this.handlePasswordChange(e) }
            />
            </FormGroup>
          </Col>
          <Button onClick={(e: any) => 
this.handleSubmit(e)}>Submit</Button>
      </Form>
      </Container>
    );
  }
}

function mapStateToProps(state: { authentication: { loggingIn: any; }; }) {
  const { loggingIn } = state.authentication;
  return {
  loggingIn
  };
}

const mapDispatchToProps = (dispatch: Dispatch<any>): PropsFromDispatch => 
{
  return {
    loginRequest: (username: string, password: string) => 
dispatch(loginRequest(username,password))
  }

}

const connectedLoginPage = connect(mapStateToProps, mapDispatchToProps) 
(LoginPage);
export { connectedLoginPage as LoginPage };