Redux Promise Middleware 如何处理 dispatch 的返回类型？答案

【问题标题】：How to handle the return type of dispatch with Redux Promise Middleware?Redux Promise Middleware 如何处理 dispatch 的返回类型？
【发布时间】：2019-01-03 18:34:00
【问题描述】：

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

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

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

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

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

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

.then 已准备好使用，但 typescript 无法编译，因为它需要其他内容。

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

【问题讨论】：

我对redux还很陌生，但这不违反redux的纯函数原则吗？如果payload是一个从服务器获取数据的promise，那么处理这个payload的reducer就不能是一个纯函数，因为结果是不确定的。
这是真的。这使得没有明确的方法来使用这个中间件变得更加烦人。我们正在考虑转向其他解决方案。
您找到解决此问题的方法了吗？我遇到了同样的问题，我找不到解决方案。就我而言，我不能使用dispatch(...).catch 表示法。它说Type error: Property 'catch' does not exist on type '{ type: string; payload(): Promise<AxiosResponse<any>>; }'
@wired_in 不，因为中间件会吞下包含承诺有效负载的原始操作，立即发送 PENDING 操作，然后再发送 FULFILLED / REJECTED 操作，具体取决于该承诺发生的情况.这些动作都是纯粹的和确定性的，它们是真正通过减速器的动作。

标签： typescript redux redux-promise-middleware

【解决方案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

}

【讨论】：