Reactjs 如何使用Typescript实现Redux异步中间件？

我需要一些关于TS的帮助

我将我的一个项目迁移到TypeSctipt。 该应用程序位于React+Redux堆栈上

我有自己的自定义获取中间件，如下所示：

import { Action, Dispatch, MiddlewareAPI } from 'redux';

import { TReduxAction } from 'interfaces';

export default ({ dispatch }: MiddlewareAPI) => (next: Dispatch<Action>) => (
  action: TReduxAction
) => {
  const { apiService, ...restActionProps } = action;

  if (apiService === undefined) {
    return next(action);
  }

  dispatch({ ...restActionProps, status: 'PENDING' });

  return apiService(action.body).then(
    (response: Response) => {
      return next({
        type: action.type,
        data: response,
        status: 'SUCCESS',
      });
    },
    (error: Error) =>
      next({
        ...action,
        error,
        status: 'ERROR',
      })
  );
};

在应用程序中，我像这样发送它

const apiService = createApiService();

export function login(body: ILoginRequest) {
  return {
    type: types.LOGIN,
    body,
    apiService: apiService.login,
  };
}

dispatch(login(payload));

而且效果很好。在80%的情况下

但是。有一个“但是”

有时我需要在组件级别上做出响应（以显示错误或执行其他操作） 在我的JS版本中，我只使用了

.then（）

因为中间件会回报一个承诺

这对TS不起作用。 上面说

属性“then”在类型“{type:string；body:ILoginRequest；apiService:（request:ILoginRequest）=>Promise；}”上不存在

因为它不知道中间件会返回一个承诺

---

那么，如何使用异步中间件键入dispatch以使其工作呢？

我与您的问题相同。我试图通过定义一个新的

TypedDispatch

并使用

createDispatchHook

from

react redux

export interface TypedDispatch<A extends Action = AnyAction> extends Dispatch {
  <T extends A>(action: T): T['apiService'] extends never ? T : Promise<unknown>;
}

export const useDispatch: () => TypedDispatch = createDispatchHook<RootState>();

导出接口类型Ddispatch扩展分派{
（动作：T）：T['apiService']从不扩展？T：承诺；
}
export const useDispatch:（）=>TypedDispatch=createDispatchHook（）；

---

现在只需使用导出的

useDispatch

而不是

react redux

。

我和你的问题相同。我试图通过定义一个新的

TypedDispatch

并使用

createDispatchHook

from

react redux

export interface TypedDispatch<A extends Action = AnyAction> extends Dispatch {
  <T extends A>(action: T): T['apiService'] extends never ? T : Promise<unknown>;
}

export const useDispatch: () => TypedDispatch = createDispatchHook<RootState>();

导出接口类型Ddispatch扩展分派{
（动作：T）：T['apiService']从不扩展？T：承诺；
}
export const useDispatch:（）=>TypedDispatch=createDispatchHook（）；

现在只需使用导出的

useDispatch

，而不是

react redux

export interface TypedDispatch<A extends Action = AnyAction> extends Dispatch {
  <T extends A>(action: T): T['apiService'] extends never ? T : Promise<unknown>;
}

export const useDispatch: () => TypedDispatch = createDispatchHook<RootState>();