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

Question

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

免责声明：我已经研究了一整天，我尝试了很多东西之后才来寻求帮助，我打开了 20 多个 Whosebug links 并通读了它们...

我有这个自定义的 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 使用来自“@reduxjs/toolkit”的 createAsyncThunk;

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;
  }
);

所以我想我需要把最后一个函数 ``async (action: AnyAction) => {` 类型的动作改成别的，但我想不通，请问各位大神指教单词？

这里有一个 link typescript playground 如果有帮助的话

https://www.typescriptlang.org/play?#code/PTAEEsFsAcHsCcAuoDeoCCA7AnugxouLJqAL6gBm8skoARPAKYAmArgB50BQUcSqoAOaNk5KjXoAbWMwCGAZwAWdANw8YCZGjxNZiRunnZMeACqLWmANYAaUDsZ7GAZUng8jOwAVZ2abOZ8QmIySmpaAHIAASY2dgAreWBEWFhJK3BECLUudT4tLlAMIxNzSysgokwbQtAAEXB5aD08RRqigFlwZmZJRgB3WSZ20DLrBqaWttqunr7BpnQvAEkRrFwCKpGQItAfP1gAyuIasXD6GJYOROTU9MzVXLxieWRhRGX5L3DGxlAAXlAAApmgcAgAuUDlTCwfqYACUAIAfLUAISo94g3z+Zh2OiIRSMTB0REAH1JoHRmNBOLx0B+8kYADoCUSSTlnphXqBGPBqPAABKyTC9XkA4HNeCySCQ17wcCYQSI-5I1CkXIK-TwCiyDygZbObCvRiQACifIQqFqRX0r1liHlirUu1ASlgrEkzGcGWgQpFfXN-MhOskjLU6q4nO5AWYgctgKBvKDoGF2GVqqBKFqiGw0EYkLoSYQSXQdTqAH1TQAlKsAeSrdBGRfgp3hHJeyGbs1FC3zoG78yGf3+tUzoGYjWaiFaZEhA4GQ6Wy3To8wjHYiEhEynrRXRQUxjwwN1wUwkPWxwRyKtLqjWlAkBEsjsNMOzFCgJPVWduzvAn6mSKHGgrCqKLbjowOoeogwEAMIyH85CAo+iCyDkt4dhAXwMsOQgiJ83w0L8WJgswba5C64AUMCjSEZAvygAAZIxoAAQSwF+mBiJZi6RRMIgrDwCQa4bkCX7EPC1q8UyeBTImFogf6vJAswkGyNBcEIfCkm8bsMlyUCiigX0sYKZCBpGvoZoKXuum7HRvxMkw8SMAQQJSXZoBGUppn8kyboel6PqcQGCkeZ5oAAPxecZLDAeFnmQhOkzTooYk9MBhmxb5CDaQluw6XZ5EuhGLr8YJwnrogYmbBJP6kDkXDrvklCWLVJAUCIrTwZY1XSu6mDIICACM3G1OVQmgGu-R7DhAA8aByKhkKYKwkAAEZiqQSJAkCTDyGkABujC2UUjKIKYUCMO61VAumoD7UdjBjktsiQv1vVkPCdgAKwAAx-YV5ERk17AtX+CoOI+g2GIe4oOE4sOlBY1juUUETPL1vLAJ1qU9YNEQjAeJjHpAA2blNa2bfA908b+mH7XAXK4bIgyZJQXWKPjfVk71xW7Ds5h-IdsiSKwfz9H8E0kJtzyPvIoCsqAAAGFAehQ4CSCZyspu1oCvgEUnSw9jBNC8zKvfVXDkVwOxzetrCICkmC22At6SAo8gAHLSow-woK8fim0yxN4AAQo7zvqjsLrELBbh4FY-t3deyU7mlkNMNDiBI3gQKZyaRKIAAaqL4vadtuSu6MiiNIrijUP0CtKxQaTSABio8mF1foPAghrUXoCwNROZ5qAES52MFTtXNq0bbydhz9TdgoNtERYVNsDIJ74CCJgsjrX0iuwPrQy+1qQ8j7mfwTzgl4REy1dFIReZINg4+j4w691-R8jyAqggIAkE-uPSeKNp6nlnlTBelN57gVXkideDtkBMAAI6sHALEIBitr6gLvu1B+RRTDOAAEwAGYAAsP1cgx12D9MhoAKSeXtpHYgT86EUMYRFIoeAPZ-x9o+f2gc+jyBDiUcOrDMDRzdqAVUP0fpcO4XHBOScUApxVOOScckC7Z1zvnEwWci6lzFideE0jPJMO4VY6xAA9dhRQfoADZFF2RRLQhxAB2Fxnl0A9GKIeexoAfoAA5vG8TmsAZBzskRAA

Answer 1

试试

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

无需在 = 左侧和右侧输入内容 - 在一侧输入会转移到另一侧。

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

Typescript: how to type a custom redux middleware that handles async actions

middleware

typescript

redux-middleware

redux-toolkit