Javascript 如何在TypeScript中实现redux中间件类
根据Redux的typescript定义,应实现这些接口以制作中间件:Javascript 如何在TypeScript中实现redux中间件类,javascript,reactjs,typescript,react-redux,redux-middleware,Javascript,Reactjs,Typescript,React Redux,Redux Middleware,根据Redux的typescript定义,应实现这些接口以制作中间件: /* 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 *
/* 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
}
/*中间件*/
导出接口MiddlewareAPI{
调度:D
getState():S
}
/**
*中间件是组成分派函数的高阶函数
*返回一个新的分派函数。它通常将异步操作转换为
*行动。
*
*中间件可以使用函数组合进行组合。这对我很有用
*记录操作,执行诸如路由或打开
*异步API调用到一系列同步操作中。
*
*@template DispatchExt此中间件添加的额外调度签名。
*@template S此中间件支持的状态类型。
*@template D此中间件所在的存储的分派类型
*安装。
*/
导出接口中间件<
DispatchExt={},
S=任何,
D扩展调度=调度
> {
(api:MiddlewareAPI):(
下一步:调度
)=>(操作:任意)=>任意
}
我试过这个:
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;
从'redux'导入{中间件、分派、任意操作、MiddlewareAPI};
从'AppState'导入{AppState};
类MiddlewareBase实现中间件{
构造函数(){
返回(api:MiddlewareAPI)=>
(下一步:发送)=>
(action:AnyAction)=>
{
//TODO:在调用下一个中间件之前做一些事情。
返回下一步(操作);
};
}
}
导出默认的中间件;
但编译器对此表示不满:
Type 'MiddlewareBase' provides no match for the signature '(api: MiddlewareAPI<Dispatch<AnyAction>, AppState>): (next: Dispatch<AnyAction>) => (action: any) => any'
Type'MiddlewareBase'未提供与签名(api:MiddlewareAPI):(下一步:分派)=>(操作:任意)=>any'
更新:
它应该是一个类,而不是一个函数。我创建了一个基类,以便以后可以继承它们。您可以查看。应该是这样的:
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”导入{MiddlewareAPI,Dispatch,Middleware,AnyAction};
常量callAPIMiddleware:中间件=({
派遣
}:MiddlewareAPI)=>next=>(操作:AnyAction | CallApiAction)=>{
if(!action.meta | |!action.meta.callApi){
返回下一步(操作);
}
const{successAction,errorAction,url,params}=action.payload;
返回fetchFn(url,参数)
.then(res=>res.json())
。然后(res=>
派遣({
类型:successAction,
有效载荷:res
})
)
.catch(res=>
派遣({
类型:errorAction,
有效载荷:res
})
);
};
首先没有“redux中间件类”。所以你的操作问题的答案很简单,你不能
Redux中间件
是一个函数接口,而不是类接口。虽然在javascript中,您可以强制从类构造函数返回函数(而不是此
对象),但不应该使用typescript。编译器可能会抱怨这是一个反模式,而类语法并不适合这种骇客用法。即使它没有抱怨,我也认为这种黑客行为绝对没有任何好处
所以你想要实现一些“可继承的”。您不必使用类语法。讽刺的是,您可以使用中间件模式。在子中间件发挥作用之前应用基础中间件
现在我不知道你打算做什么,所以不要去编一些毫无意义的例子。如果你想解释你想做什么,我会调查的。嘿,谢谢你的帮助,但是,我需要它是一个类,因为它是由其他类继承的。我应该在问题上加上这个我想你做不到。因为redux接受函数作为中间件。当然,您可以使用实现某些逻辑的方法创建类,但无论如何它都是函数。我的建议是:使用函数的组合而不是继承。如果你必须上课,你会有麻烦的。我的建议是,不要。我看不出你必须这样做的具体原因。其他机制代替继承?告诉我们您打算如何使用这个基类。如果您从构造函数返回一个函数,而不是通常的
this
对象,那么使用类是没有意义的。该函数将无法访问类原型。