Блог

Главная - Вопросы по программированию - Typescript: как ввести пользовательское промежуточное программное обеспечение redux, которое обрабатывает асинхронные действия

Typescript: как ввести пользовательское промежуточное программное обеспечение redux, которое обрабатывает асинхронные действия

#typescript #middleware #redux-toolkit #redux-middleware

Вопрос:

Я надеюсь, что все отлично проведут эти выходные!

отказ от ответственности: Я уже исследовал весь день и прихожу просить о помощи только после того, как перепробовал много вещей, открыл более 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 amp;amp; 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;
  }
);

Поэтому я считаю, что мне нужно изменить последнюю функцию `асинхронный (действие: любое действие) = > {«тип действия на что-то другое, но я не могу понять, могу ли я получить разъяснение ваших слов?

вот ссылка на игровую площадку для машинописи, если это поможет

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

Ответ №1:

Попробуйте это с

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

не нужно печатать что — то слева и справа от = -ввод текста с одной стороны перенесет его на другую сторону.

Комментарии:

1. В случае, если это кому-то поможет: мне пришлось установить первый параметр типа в мой (который, как я думаю, обычно обозначается как), чтобы он работал ThunkDispatch CombinedState RootState

Метки: ,