如何在TypeScript中实现redux中间件类

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在TypeScript中实现redux中间件类相关的知识,希望对你有一定的参考价值。

根据Redux的typescript定义,应该实现这些接口来制作middelware:

/* middleware */

export interface MiddlewareAPI<D extends Dispatch = Dispatch, S = any> {
  dispatch: D
  getState(): S
}

/**
 * A middleware is a higher-order function that composes a dispatch function
 * to return a new dispatch function. It often turns async actions into
 * actions.
 *
 * Middleware is composable using function composition. It is useful for
 * logging actions, performing side effects like routing, or turning an
 * asynchronous API call into a series of synchronous actions.
 *
 * @template DispatchExt Extra Dispatch signature added by this middleware.
 * @template S The type of the state supported by this middleware.
 * @template D The type of Dispatch of the store where this middleware is
 *   installed.
 */
export interface Middleware<
  DispatchExt = {},
  S = any,
  D extends Dispatch = Dispatch
> {
  (api: MiddlewareAPI<D, S>): (
    next: Dispatch<AnyAction>
  ) => (action: any) => any
}

我试过这个:

import { Middleware, Dispatch, AnyAction, MiddlewareAPI } from 'redux';
import { AppState } from 'AppState';

class MiddlewareBase implements Middleware<{}, AppState, Dispatch<AnyAction>> {
  constructor() {
    return (api: MiddlewareAPI<Dispatch<AnyAction>, AppState>) => 
        (next: Dispatch<AnyAction>) =>
           (action: AnyAction) =>
              {
                 // TODO: Do something before calling the next middleware.
                 return next(action);
              };
  }
}

export default MiddlewareBase;

但是编译器抱怨这个:

  Type 'MiddlewareBase' provides no match for the signature '(api: MiddlewareAPI<Dispatch<AnyAction>, AppState>): (next: Dispatch<AnyAction>) => (action: any) => any' 

更新:

它应该是一个类,而不是一个函数。我创建了一个基类,以便稍后继承它们。

答案

你可以看看my code。应该是这样的:

  import { MiddlewareAPI, Dispatch, Middleware, AnyAction } from "redux";

  const callAPIMiddleware: Middleware<Dispatch> = ({
    dispatch
  }: MiddlewareAPI) => next => (action: AnyAction | CallApiAction) => {
    if (!action.meta || !action.meta.callApi) {
      return next(action);
    }

    const { successAction, errorAction, url, params } = action.payload;

    return fetchFn(url, params)
      .then(res => res.json())
      .then(res =>
        dispatch({
          type: successAction,
          payload: res
        })
      )
      .catch(res =>
        dispatch({
          type: errorAction,
          payload: res
        })
      );
  };
另一答案

首先,没有“redux中间件类”这样的东西。所以你的方法问题的答案很简单,你做不到。

Redux Middleware是一个函数接口,而不是类接口。虽然在javascript中你可以强制从类构造函数返回一个函数(而不是this对象),但是你不应该使用typescript。编译器可能会抱怨它是一个反模式,并且类语法不适合这种hacky用法。即使它没有抱怨,我也看到了这种黑客的绝对零收益。

所以你想要实现“可继承”的东西。您不必使用类语法。具有讽刺意味的是,你可以使用中间件模式。在子中间件之前应用基础中间件给你继承效果。

现在我不知道你打算做什么,所以不会化妆毫无意义的例子。如果你想解释你想要做什么,我会调查一下。

以上是关于如何在TypeScript中实现redux中间件类的主要内容,如果未能解决你的问题,请参考以下文章

使用 redux saga 在 react native 中实现令牌刷新

TypeScript 在类中实现接口

使用类组件在 Vue mixin 中实现 typescript 泛型

我想在辅助函数中操作 React 类组件中存在的状态。我想在 Typescript 中实现相同的目标

如何在 React Redux 中实现自包含组件?

如何在 TypeScript 中实现睡眠功能?