如何在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 中实现令牌刷新
使用类组件在 Vue mixin 中实现 typescript 泛型