更新

Question

我有以下异步操作定义：

import {Dispatch} from 'react';
import axios, {AxiosResponse, AxiosError} from 'axios';

function asyncAction() {
    return (dispatch: Dispatch<any>): Promise<number> => {
        return axios.get('http://www.example.com')
            .then( (res: AxiosResponse<any>) => {
                return 1;
            })
            .catch( (err: AxiosError<any>) => {
                return 2;
            });
    }
}

上面的类型检查得很好。

我还了解到，当您调用dispatch并将其传递给异步动作时，就像这样：

dispatch(asynAction())

…然后是内部函数的返回类型，因此我希望上述值的类型为Promise<number>。但是以下内容不会进行类型检查：

function foo (dispatch: Dispatch<any>) {
    const n: Promise<number> = dispatch(asyncAction()); // line A
}

具体地说，我在line A上收到以下错误：

TS2322: Type 'void' is not assignable to type 'Promise<number>'

因此，为了满足TS，我必须做类似以下事情的感觉：

const n: Promise<number> = dispatch(asyncAction()) as unknown as Promise<number>;

我想念什么？

更新

我的package.json文件有：

"@types/react-redux": "^7.1.9",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0"

当我执行以下操作时：

import {ThunkDispatch as Dispatch} from 'redux-thunk';

…，并使用导入的ThunkDispatch类型作为ThunkDispatch<any, any, any>（在上面的代码中我有Dispatch<any>的任何地方），如下所示：

import axios, {AxiosResponse
             , AxiosError} from 'axios';
import {ThunkDispatch as Dispatch} from 'redux-thunk';

export function asyncAction() {
    return (dispatch: Dispatch<any, any, any>): Promise<number> => {
        return axios.get('http://www.example.com')
            .then( (res: AxiosResponse<any>) => {
                return 1;
            })
            .catch( (err: AxiosError<any>) => {
                return 2;
            });
    }
}

export function foo (dispatch: Dispatch<any, any, any>) {
    const n: Promise<number> = dispatch(asyncAction());
    console.log(n);
}

...我得到了另一个错误：

  TS2739: Type '(dispatch: ThunkDispatch<any, any, any>) => Promise<number>' is missing the following properties from type 'Promise<number>': then, catch, [Symbol.toStringTag]

Answer 1

不同的软件包对于Dispatch类型具有不同的定义。您正在从“反应”中导入一个，这不符合您的需求。

Redux声明调度返回操作：

export interface Dispatch<A extends Action = AnyAction> {
  <T extends A>(action: T): T
}

为自己的Dispatch挂钩（redux-lite）定义useReducer的React表示，它什么也不返回：

type Dispatch<A> = (value: A) => void;

Thunk的定义要复杂得多，它可以基于泛型返回任意的返回类型：

export interface Dispatch<A extends Action = AnyAction> {
    <TReturnType = any, TState = any, TExtraThunkArg = any>(
      thunkAction: ThunkAction<TReturnType, TState, TExtraThunkArg, A>,
    ): TReturnType;
  }

您的第一个示例之所以有用，是因为您从未真正调用过dispatch函数，并且返回类型与axios调用中的返回类型相匹配。在第二个示例中，您遇到了同样的问题。

asyncAction()不会分派动作。 Promise<number>是动作创建者的返回类型，而不是调度的返回类型。有关缺少属性的错误基本上是在告诉您，调度不会返回Promise。

您已经以一种非常混乱和混乱的方式编写了asyncAction，但是基本上它是一个函数，该函数返回一个使用dispatch并返回Promise<number>的函数。因此，基于此，在Promise<number>中获得foo的方式不是通过函数调用dispatch，而是通过将dispatch作为参数传递给通过调用创建的函数ayncAction()。

export function foo (dispatch: Dispatch<any, any, any>) {
    const n: Promise<number> = asyncAction()(dispatch);
    console.log(n);
}

这当然是没有意义的，因为您仍然不会在任何地方分派任何东西。

Typescript Playground Link

编辑：

希望这对您要完成的工作有所帮助。希望从n的返回值中获取dispatch仅用于测试，因为您不能也不应这样做。

让我们定义我们最终将要分派的动作以及它的创建者。

import { Action } from "redux";

// normal action type
interface NumberAction extends Action {
    payload: number;
}

// normal action creator
function sendNumber(number: number): NumberAction {
    return { type: 'SEND_NUMBER', payload: number };
}

我们制作了一个ThunkAction，用于分发此NumberAction。该函数以dispatch作为参数，并为其最终调度的操作返回Promise。

const myThunkAction1: ThunkAction<Promise<NumberAction>, any, any, NumberAction> = (dispatch): Promise<NumberAction> => {
    return axios.get('http://www.example.com')
        .then((res: AxiosResponse<any>) => {
            return 1;
        })
        .catch((err: AxiosError<any>) => {
            return 2;
        })
        .then(number => dispatch(sendNumber(number)));
}

我们可以dispatch，但是它返回ThunkAction本身。换句话说，调用dispatch返回一个使用dispatch的函数。因此，从分配一个thunk的返回值中您将无法获得任何有意义的东西。

export function foo(dispatch: Dispatch<any, any, any>) {
    // still doesn't return Promise<number>, returns the ThunkAction
    const returned = dispatch(myThunkAction2);
    // can only get to Promise<number> by calling the returned thunk, which would re-dispatch the action
    const n: Promise<number> = returned(dispatch, () => {}, {});
    console.log(n);
}

Second Playground Link

异步调度值的TypeScript类型

更新

1 个答案: