Как реализовать класс промежуточного программного обеспечения в TypeScript - PullRequest
Новая
       36

Как реализовать класс промежуточного программного обеспечения в TypeScript

1 голос
/ 07 апреля 2019

Согласно определению Redux для машинописного текста, эти интерфейсы должны быть реализованы для создания промежуточного программного обеспечения: 

/* 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'

Обновление:

Это должен быть класс, а не функция.Я создал базовый класс, чтобы потом наследовать их.

Ответы [ 2 ]

1 голос
/ 14 апреля 2019

Во-первых, такого понятия, как «класс промежуточного программного обеспечения», не существует.Таким образом, вы можете просто ответить на вопрос с практическими рекомендациями:

Redux Middleware - это интерфейс функций, а не интерфейс классов.Хотя в javascript вы могли бы принудительно возвращать функцию (вместо this объекта) из конструктора класса, вы не должны использовать typcript .Компилятор, вероятно, будет жаловаться на это, потому что это антипаттерн, а синтаксис класса не предназначен для такого хакерского использования.Даже если он не жалуется, я вижу абсолютно нулевой выигрыш от такого взлома.

Итак, вы хотите реализовать что-то, что «наследуется».Вам не нужно идти с синтаксисом класса.По иронии судьбы, вы можете использовать шаблон middleware .Примените базовое промежуточное программное обеспечение, прежде чем вспомогательное промежуточное программное обеспечение даст вам эффект наследования.

Теперь я не знаю, что вы собираетесь делать, поэтому не буду приводить бессмысленные примеры.Если вы хотите объяснить, что вы пытаетесь сделать, я посмотрю на это.

1 голос
/ 11 апреля 2019

Можете посмотреть мой код .Должно быть что-то вроде этого: 

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