我刚刚将react-redux从4.0.0升级到4.0.5,并且我的代码在编译过程中失败了。我收到错误
类型“ ThunkAction,RootState,未定义,任何>”上的属性“ then”不存在。 TS2339
import { ThunkAction, ThunkDispatch as Dispatch } from "redux-thunk";
import { RootState } from "../store/reducer";
import { RootAction } from "../store/actions";
export type ThunkResult<R> = ThunkAction<R, RootState, undefined, RootAction>;
export type ThunkDispatch = Dispatch<RootState, undefined, RootAction>;
// Copied from https://github.com/reduxjs/redux-thunk/blob/0e60b6264fb402afb328157c4337f5cc87a07b53/index.d.ts#L63-L67
export type ThunkActionDispatch<
TActionCreator extends (...args: any[]) => ThunkAction<any, any, any, any>
> = (
...args: Parameters<TActionCreator>
) => ReturnType<ReturnType<TActionCreator>>;
组件:
import * as React from "react";
import { connect } from "react-redux";
import { withRouter, RouteComponentProps } from "react-router-dom";
import {
Dialog,
FormGroup,
InputGroup,
Button,
Classes,
} from "@blueprintjs/core";
import { createClient } from "../../store/modules/client";
import { ThunkDispatch } from "../../types/redux";
interface IProps extends RouteComponentProps<any> {
dispatch: ThunkDispatch;
isOpen: boolean;
onClose: () => void;
}
interface IState {
name: string;
isLoading: boolean;
error: string;
}
class CreateClientModal extends React.Component<IProps, IState> {
public state: IState = {
name: "",
isLoading: false,
error: "",
};
public render() {
return (
<Dialog
isOpen={this.props.isOpen}
onClose={this.props.onClose}
title="Add New Client"
>
<div className={Classes.DIALOG_BODY}>
<FormGroup
helperText={this.state.error}
intent={this.state.error ? "danger" : "none"}
label="New Client"
labelFor="client-name-input"
labelInfo="(required)"
>
<InputGroup
id="client-name-input"
placeholder="Client Name"
required={true}
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
this.setState({ name: e.target.value })
}
/>
</FormGroup>
</div>
<div className={Classes.DIALOG_FOOTER}>
<div className={Classes.DIALOG_FOOTER_ACTIONS}>
<Button
onClick={this.handleOnClose}
disabled={this.state.isLoading}
>
Cancel
</Button>
<Button
intent="primary"
onClick={this.handleSubmit}
loading={this.state.isLoading}
>
Create Client
</Button>
</div>
</div>
</Dialog>
);
}
private handleOnClose = () => {
this.setState({ error: "" });
this.props.onClose();
};
private handleSubmit = async () => {
this.setState({ isLoading: true });
this.props
.dispatch(createClient(this.state.name))
.then(client => {
this.props.history.push(`/clients/${client.payload.id}`);
})
.catch(error => {
this.setState({
isLoading: false,
error: "Error creating client. Please try again.",
});
// tslint:disable-next-line:no-console
console.error(error);
});
};
}
export default withRouter(connect()(CreateClientModal));
我在this.props.dispatch(createClient(this.state.name))。then()处收到错误。请提出解决方案的建议。谢谢。