Typescript：如何输入处理异步操作的自定义 redux 中间件

Question

我希望每个人这个周末都过得很好！

免责声明：我已经研究了一整天，在尝试了很多事情之后，我打开了 20 多个 StackOverflow 链接并阅读了它们，然后才来寻求帮助......

我有这个自定义的 redux 中间件，它的目的是捕获失败的承诺并为每个承诺分派一个操作。

const errorMiddleware: Middleware =
  ({ dispatch }: MiddlewareAPI) =>
  (next: Dispatch) =>
  async (action: AnyAction) => {
    const { meta, payload } = action;
    const { withErrorHandler, defaultErrorCode } = meta;

    const isPromise = getIsPromise(payload);

    if (isPromise && withErrorHandler) {
      return next(action)
        .catch(errorHandler(defaultErrorCode))
        .catch((handledError: ISystemError) =>
          Promise.reject(
            handledError.shouldSkipHandleError
              ? handledError
              : dispatch(addError(handledError))
          )
        );
    }

    return next(action);
  };

我想解决的问题是async (action: AnyAction) => {

我收到一条错误消息说

Argument of type 'AsyncThunkAction<number, number, {}>' is not assignable to parameter of type 'AnyAction'.
  Property 'type' is missing in type 'AsyncThunkAction<number, number, {}>' but required in type 'AnyAction'.  TS2345

    53 |         <button
    54 |           className={styles.asyncButton}
  > 55 |           onClick={() => dispatch(incrementAsync(incrementValue))}
       |                                   ^
    56 |         >
    57 |           Add Async
    58 |         </button>

这是因为incrementAsync使用了createAsyncThunk“@reduxjs/toolkit”；

export const incrementAsync = createAsyncThunk(
  'counter/fetchCount',
  async (amount: number) => {
    const response = await fetchCount(amount);
    // The value we return becomes the `fulfilled` action payload
    return response.data;
  }
);

所以我相信我需要将最后一个 function ``async (action: AnyAction) => {` 类型的操作更改为其他类型，但我无法弄清楚，我可以得到你的话的启发吗？

如果有帮助的话，这是打字稿游乐场的链接

https://www.typescriptlang.org/play?#code/PTAEEsFsAcHsCcAuoDeoCCA7AnugxouLJqAL6gBm8skoARPAKYAmArgB50BQUcSqoAOaNk5KjXoAbWMwCGAZwAWdANw8YCZGjxNZiRunnZMeACqLWmANYAaUDsZ7GAZUng8jOwAVZ2abOZ 8QmIySmpaAHIAASY2dgAreWBEWFhJK3BECLUudT4tLlAMIxNzSysgokwbQtAAEXB5aD08RRqigFlwZmZJRgB3WSZ20DLrBqaWttqunr7BpnQvAEkRrFwCKpGQItAfP1gAyuIasXD6GJYOROTU9MzVXLxieWRhRG X5L3DGxlAAXlAAApmgcAgAuUDlTCwfqYACUAIAfLUAISo94g3z+Zh2OiIRSMTB0REAH1JoHRmNBOLx0B+8kYADoCUSSTlnphXqBGPBqPAABKyTC9XkA4HNeCySCQ17wcCYQSI-5I1CkXIK-TwCiyDygZbObCvRiQACif IQqFqRX0r1liHlirUu1ASlgrEkzGcGWgQpFfXN-MhOskjLU6q4nO5AWYgctgKBvKDoGF2GVqqBKFqiGw0EYkLoSYQSXQdTqAH1TQAlKsAeSrdBGRfgp3hHJeyGbs1FC3zoG78yGf3+tUzoGYjWaiFaZEhA4 GQ6Wy3To8wjHYiEhEynrRXRQUxjwwN1wUwkPWxwRyKtLqjWlAkBEsjsNMOzFCgJPVWduzvAn6mSKHGgrCqKLbjowOoeogwEAMIyH85CAo+iCyDkt4dhAXwMsOQgiJ83w0L8WJgswba5C64AUMCjSEZAvygaAZ IxoAAQSwF+mBiJZi6RRMIgrDwCQa4bkCX7EPC1q8UyeBTImFogf6vJAswkGyNBcEIfCkm8bsMlyUCiigX0sYKZCBpGvoZoKXuum7HRvxMkw8SMAQQJSXZoBGUppn8kyboel6PqcQGCkeZ5oAAPxecZLDAeFnmQhOk zTooYk9MBhmxb5CDaQluw6XZ5EuhGLr8YJwnrogYmbBJP6kDkXDrvklCWLVJAUCIrTwZY1XSu6mDIICACM3G1OVQmgGu-R7DhaAA8aByKhkKYKwkAAEZiqQSJAkCTDyGkABujC2UUjKIKYUCMO61VAumoD7UdjBj ktsiQv1vVkPCdgAKwaAAx-YV5ERk17AtX+CoOI+g2GIe4oOE4sOlBY1juUUETPL1vLAJ1qU9YNEQjAeJjHpaA2blNa2bfA908b+mH7XAXK4bIgyZJQXWKPjfVk71xW7Ds5h-IdsiSKwfz9H8E0kJ tzyPvIoCsqAAAGFAehQ4CSCZyspu1oCvgEUnSw9jBNC8zKvfVXDkVwOxzetrCICkmC22At6SAo8gAHLSow-woK8fim0yxN4AAQo7zvqjsLrELBbh4FY-t3deyU7mlkNMNDiBI3gQKZyaRKIA​​AaqL4vadtuSu6Mii NIrijUP0CtKxQaTSABio8mF1foPAghrUXoCwNROZ5qAES52MFTtXNq0bbydhz9TdgoNTERYVNsDIJ74CCJgsjrX0iuwPrQy+1qQ8j7mfwTzgl4REy1dFIReZING4 +j4w691-R8jyAqggIAkE-uPSeKNp6nlnlTBelN57gVXkideDtkBMAAI6sHALEIBitr6gLvu1B+RRTDOAAEwaAGYAASP1cgx12D9MhoAKSeXtpHYgT86EUMYRFIoeAPZ-x9o+f2gc+jyBDiUcorDMDRzdqAVUP0fpc O4XHBOScUApxVOOScckC7Z1zvnEwWci6lzFideE0jPJMO4VY6xAA9dhRQfoADZFF2RRLQhxAB2Fxnl0A9GKIeexoAfoAA5vG8TmsAZBzskRAA

Answer 1

尝试一下

const errorMiddleware: Middleware<{}, unknown, ThunkDispatch<unknown, unknown, AnyAction>> =
  ({ dispatch }) =>
  (next) =>
  async (action) => {

无需在左右两侧键入内容-在=一侧键入内容将转移到另一侧。