完整的工作代码和框示例 here
我声明了一个简单的动作类型和一个分派它的异步thunk:
type ActionType = { type: "foo"; v: number };
const FooThunk: ThunkAction<Promise<ActionType>, any, any, ActionType> = (dispatch): Promise<ActionType>
=> {
return new Promise<number>((resolve) => {
setTimeout(() => {
resolve(42);
}, 100);
}).then((v: number) => {
return dispatch({ type: "foo", v });
});
};
现在的问题是,当我调用dispatch(FooThunk)
时得到的值是什么类型。
Typescript认为类型为ThunkAction<Promise<ActionType>, any, any, ActionType>
,并在以下消息中抱怨(在沙盒的第38行):
'ThunkAction<Promise<ActionType>, any, any, ActionType>' is missing the following properties from type 'Promise<ActionType>': then, catch, [Symbol.toStringTag]ts(2739)
但是,当我记录在运行时获得的值时(codesandbox的第48行),我清楚地看到它是Promise
。在StackOverflow上搜索时,我发现矛盾的答案。
This answer说,派遣一个thunk会返回thunk本身。 this answer建议派遣一个thunk会返回一个Promise。
Typescript的类型系统似乎表示派发thunk的类型与thunk本身相同。但是在运行时,我得到一个Promise对象。我想念什么?
仅出于完整性目的,我附加了将在沙箱中找到的代码(上面提供的链接):
import * as React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import { initialState, rootReducer } from "./rootReducer";
import "./styles.css";
import { ThunkDispatch as Dispatch, ThunkAction } from "redux-thunk";
import { connect, ConnectedProps } from "react-redux";
import { applyMiddleware } from "redux";
import thunk from "redux-thunk";
const store = createStore(
rootReducer /* preloadedState, */,
applyMiddleware(thunk)
);
//const store = createStore(rootReducer, initialState);
type ActionType = { type: "foo"; v: number };
const FooThunk: ThunkAction<Promise<ActionType>, any, any, ActionType> = (
dispatch
): Promise<ActionType> => {
return new Promise<number>((resolve) => {
setTimeout(() => {
resolve(42);
}, 100);
}).then((v: number) => {
return dispatch({ type: "foo", v });
});
};
const mapDispatchToProps = (dispatch: Dispatch<any, any, any>) => {
return {
dispatchFooThunk: (): Promise<ActionType> => dispatch(FooThunk)
};
};
const connector = connect(null, mapDispatchToProps);
type PropsFromRedux = ConnectedProps<typeof connector>;
class FooComponent_ extends React.Component<PropsFromRedux> {
componentDidMount() {
const p = this.props.dispatchFooThunk();
console.log(p); // if you examine log output you see clearly that this is a PROMISE !
}
render() {
return <div>foo</div>;
}
}
const FooComponent = connector(FooComponent_);
class App extends React.Component {
render() {
return (
<Provider store={store}>
<FooComponent />
</Provider>
);
}
}
const rootElement = document.getElementById("root");
render(<App />, rootElement);
答案 0 :(得分:2)
thunk的返回值是thunk动作本身的返回值。结果是:如果它是一个异步函数,它将返回一个Promise。
普通的Dispatch
类型不知道如何处理重击。
如果您使用的是redux工具包,this documentation part将介绍如何使用商店配置中推断的Dispatch类型正确键入useDispatch
挂钩。
如果您使用的是纯Redux,则只能使用ThunkDispatch
类型。 This part of the react-redux documentation介绍了在这种情况下如何键入useDispatch
挂钩。
PS:在您的特定情况下,您的ThunkDispatch<any, any, any>
太普通了。最后一个any
会非常匹配。尝试使用ThunkDispatch<any, any, AnyAction>
,它将起作用。