reactjs - Dispatch 不是一个函数 React Redux Typescript

Question

在 props 中访问 redux 调度方法时遇到问题。当从 redux-form 调用 handleSubmit 时，dispatch 方法返回“dispatch is not a function”。

我尝试将操作添加到我传递给组件的各种接口中。我传递给 connect 的参数顺序看起来是正确的，以及我用来将操作传递给传递给组件的接口的语法。

PropsFromDispatch 包含 loginRequest 操作，我将其映射到 MapDispatchToProps 方法中的道具。

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

标签： reactjstypescriptreact-reduxsaga