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

Posted 2023-02-22

【中文标题】如何键入 Redux thunk 动作创建者以返回承诺

【英文标题】：How can I type a Redux thunk action creator to return a promise

【发布时间】：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(); ); 有问题？否则我将如何告诉承诺何时解决？

你不应该一开始就创建一个承诺，因为你已经有了一个。这就是误解。

你是对的。感谢您指出这一点。

【参考方案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();
        );
    );
    ;