typescript - Redux Promise Middleware 如何处理 dispatch 的返回类型？

Question

Redux Promise Middleware 似乎处理了动作负载的承诺解析。例如，考虑这个使用 aPromise作为有效负载的动作创建者：

export default class ActionCreators {
  public static fetchAllUsers(): FetchAction {
    return {
      type: actionTypes.FETCH_ALL_USERS,
      payload: fetch("api.com/users")
    };
  }
}

当使用这个动作创建器时，TypeScript 期望Action返回的数据，而不是Promise由于 redux-promise-middleware 而实际返回的数据。

所以下面的代码不会编译，因为Property 'then' does not exist on type 'Action'.

dispatch(ActionCreators.fetchAllUsers())
    .then(response => {
        // do something with response
    })

Typescript 期望返回的属性如payloadand type，实际上并没有返回，因为 promise 已经被处理并且实际上已经被返回。

.then已准备好使用，但 typescript 不会编译，因为它需要其他东西。

我想问题是：如何编写正确的类型来处理 redux-promise-middleware 操作，同时为 redux' connect-function 提供正确的调度类型mapDispatchToProps等。

标签： typescriptreduxredux-promise-middleware

Answer 1

您可以使用条件类型。例如

export interface BaseAction<TPayload> {
   type: string;
   payload: TPayload;
}

export interface Dispatch {
    <T extends BaseAction<any>>(action: T): 
         T extends BaseAction<Promise<infer R>> ? Promise<R>:  T

}