如何键入 Redux thunk 动作创建者以返回承诺答案

【问题标题】：How can I type a Redux thunk action creator to return a promise如何键入 Redux thunk 动作创建者以返回承诺
【发布时间】：2019-09-22 21:39:22
【问题描述】：

我有一个在单击按钮时执行的主 thunk。在这个 thunk 中，我想调用另一个 thunk 并等待它完成，然后再继续前进。第二次重击返回一个承诺。

这是我的一些代码：

export function mainThunk(): ThunkAction<void, void, void, AnyAction> {
    return (dispatch: Dispatch<any>) => {
    ...do some stuff
    dispatch(secondThunk()).then(() => {
     ...do other stuff
     })
    };
}

export function secondThunk(): ThunkAction<Promise<any>, void, void, AnyAction> {
    return (dispatch: Dispatch<any>) => {
      return new Promise((resolve: any, reject: any) => {
        someAsyncFunction()
        .then((response) => {
           return Promise.all(someArray.map(someId => {
             return someOtherAsyncFunction(someId):
         }));
        })
        .then((responses) => {
           response.foreach(response => {
             dispatch(someReduxAction(response.someField));
           });
        })
        .then(() => {
          resolve();
        });
    });
    };
}

代码在执行过程中似乎可以工作，但我有一个编译错误说：Property "then" does not exist on type "ThunkAction<Promise<any>, void, void, AnyAction>"

我一直在阅读其他堆栈溢出帖子，但我似乎无法找到我在这里遗漏的内容，我无法让 typescript 认为它是正确的。

【问题讨论】：

您的代码非常复杂。具体来说，.then(() => { resolve(); }); 说明了对 Promise 的根本误解。您还过度指定了各种元素的类型。
为什么.then(() => { resolve(); }); 有问题？否则我将如何告诉承诺何时解决？
你不应该一开始就创建一个承诺，因为你已经有了一个。这就是误解。
你是对的。感谢您指出这一点。

标签： javascript typescript promise redux-thunk

【解决方案1】：

想出了解决办法。一旦你使用了 thunk 中间件，你的 dispatch 就变成了 ThunkDispatch 而不是普通的 Dispatch。但是 Typescript 很聪明，你实际上不必键入 dispatch 函数。因此，在 dispatch 上删除类型可以解决问题。见下文：

export function mainThunk(): ThunkAction<void, void, void, AnyAction> {
    return (dispatch) => {
    ...do some stuff
    dispatch(secondThunk()).then(() => {
     ...do other stuff
     })
    };
}

export function secondThunk(): ThunkAction<Promise<any>, void, void, AnyAction> {
    return (dispatch) => {
      return new Promise((resolve: any, reject: any) => {
        someAsyncFunction()
        .then((response) => {
           return Promise.all(someArray.map(someId => {
             return someOtherAsyncFunction(someId):
         }));
        })
        .then((responses) => {
           response.foreach(response => {
             dispatch(someReduxAction(response.someField));
           });
        })
        .then(() => {
          resolve();
        });
    });
    };
}

【讨论】：