如何解决如何使用TypeScript键入Redux-Observable的史诗动作
我正在我的应用程序中设置TypeScript和Redux-Observable,并具有以下简单流程,我想在此处使用Epic进行应用:
dispatch('someAction')
fetch('relevant-endpoint-from-api')
getResponse(dispatch('someActionSuccess'))
failed(dispatch('someActionFailed'))
因此,在this article之后,我尝试了一下。
这是我的actions.ts文件:
export interface MediasOrigin {
id: number;
label: string;
url: string;
zonesId: number[];
scenariosRef: number[];
stepsRef: number[];
gearsId: number[];
texturesId: number[];
}
export enum MediasActionTypes {
MEDIAS_ORIGINS_FETCH_ALL = "MEDIAS_ORIGINS_FETCH_ALL",MEDIAS_ORIGINS_FETCH_ALL_SUCCESS = "MEDIAS_ORIGINS_FETCH_ALL_SUCCESS",MEDIAS_ORIGINS_FETCH_ALL_FAILED = "MEDIAS_ORIGINS_FETCH_ALL_FAILED"
}
export interface IMediasOriginsFetchAllAction {
type: MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL;
}
export interface IMediasOriginsFetchAllSuccessAction {
type: MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL;
payload: {
medias: MediasOrigin[]
}
}
export interface IMediasOriginsFetchAllFailedAction {
type: MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL;
payload: {
error: string
}
}
/* ACTION CREATOR */
export function fetchAllMediaOrigins(): IMediasOriginsFetchAllAction {
return {
type: MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL
}
}
export type MediasAction = IMediasOriginsFetchAllAction | IMediasOriginsFetchAllSuccessAction | IMediasOriginsFetchAllFailedAction
然后是我的epic.ts文件:
import { from,Observable,of } from "rxjs"
import { map,catchError,switchMap,filter } from "rxjs/operators"
import { isOfType } from "typesafe-actions"
import { Epic } from "redux-observable"
import ApiClient from "agent" // change,wrapper around superagent (http client)
import {IStore} from "reducers"
import {
MediasAction,MediasActionTypes,IMediasOrigin
} from "./actions"
const getAllMediasOriginEpic: Epic<MediasAction,MediasAction,IStore> = action$ => {
const request = new ApiClient();
return action$.pipe(
filter(isOfType(MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL)),switchMap(action => // change
from(request.getAllOriginMedias()).pipe( // change
map((response: IMediasOrigin[]) // change =>
of({
type: MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL_SUCCESS,payload: { medias: response },})
),catchError((error: Error) // change =>
of({
type: MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL_FAILED,payload: {error: Error.message},// change
})
)
)
)
)
}
export default combineEpics(getAllMediasOriginEpic)
我是TypeScript的新手,所以对于狂热者来说,该错误似乎很明显,但是基于TypeScript的消息,我没有做错什么。
(不再相关),该消息指向史诗中返回的action$
:
Type 'Observable<IMediasOriginsFetchAllAction | Observable<{ type: MediasActionTypes; payload: { medias: unknown; }; }>>' is not assignable to type 'Observable<MediasAction>'.
Type 'IMediasOriginsFetchAllAction | Observable<{ type: MediasActionTypes; payload: { medias: unknown; }; }>' is not assignable to type 'MediasAction'.
Type 'Observable<{ type: MediasActionTypes; payload: { medias: unknown; }; }>' is not assignable to type 'MediasAction'.
Type 'Observable<{ type: MediasActionTypes; payload: { medias: unknown; }; }>' is missing the following properties from type 'IMediasOriginsFetchAllSuccessAction': type,payload TS2322
我没有解决该问题的办法,尽管从该消息看来,我所做的一切都是错误的,并且尽管在接口中将其指定为MediasOrigin
的数组,但媒体是未知的。我在这里想念东西吗?
有关信息,以下是软件包的版本:
- 打字稿:4.0.2
- 可观察到的Redux:1.2.0
- rxjs:6.6.3
//编辑:2020年9月24日
为了使其更简单,我进行了一些更改,并弄清了错误消息为什么谈论mediasUnknown:我没有在史诗中告诉从api调用映射的响应是MediasOrigin[]
(重命名为IMediasOrigin []现在)。我也删除了api
方法,该方法是我自己的自定义运算符。上面的脚本已进行了更改,并带有// change
注释。
现在是错误消息:
TypeScript error in /Users/utopiad/Dev/spectral-core/platform/src/components/Medias/epics.ts(11,7):
Type '(action$: ActionsObservable<MediasAction>) => Observable<Observable<{ type: MediasActionTypes; payload: { medias: IMediasOrigin[]; }; }> | { ...; }>' is not assignable to type 'Epic<MediasAction,IStore,any>'.
Type 'Observable<Observable<{ type: MediasActionTypes; payload: { medias: IMediasOrigin[]; }; }> | { type: MediasActionTypes; payload: { ...; }; }>' is not assignable to type 'Observable<MediasAction>'.
Type 'Observable<{ type: MediasActionTypes; payload: { medias: IMediasOrigin[]; }; }> | { type: MediasActionTypes; payload: { ...; }; }' is not assignable to type 'MediasAction'.
Type 'Observable<{ type: MediasActionTypes; payload: { medias: IMediasOrigin[]; }; }>' is not assignable to type 'MediasAction'.
Type 'Observable<{ type: MediasActionTypes; payload: { medias: IMediasOrigin[]; }; }>' is missing the following properties from type 'IMediasOriginsFetchAllFailedAction': type,payload
从我得到的结果来看,我的IMediasOriginsFetchAllSuccessAction和IMediasOriginsFetchAllFailedAction在有效负载级别之间似乎存在冲突,这使得其中之一无法分配为MediasAction类型。但这不是| |的全部目的。创建类型时使用运算符?
解决方法
您可以通过在返回操作时将as const
添加到MediasActionTypes.*
中来解决此问题:
const getAllMediasOriginEpic: Epic<MediasAction,MediasAction> = (action$) => {
const request = new ApiClient();
return action$.pipe(
filter(isOfType(MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL)),switchMap((action) =>
from(request.getAllOriginMedias()).pipe(
map((response: IMediasOrigin[]) => ({
type: MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL_SUCCESS as const,payload: { medias: response }
})),catchError((error: Error) =>
of({
type: MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL_FAILED as const,payload: { error: error.message }
})
)
)
)
);
};
这是因为当您使用类似这样的内容时:
map((response: IMediasOrigin[]) => ({
type: MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL_SUCCESS,payload: { medias: response }
})),
Observable的类型为:{ type: MediasActionTypes },...
。如您所见,您的错误
Type 'MediasActionTypes' is not assignable to type 'MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL_FAILED'
'MediasActionTypes'
表示联合,而MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL_FAILED
表示具体类型。因此,使用type: MediasActionTypes.MEDIAS_ORIGINS_FETCH_ALL_SUCCESS as const
可以缩小类型。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。