我正在尝试设置史诗,我之前已经做过多次,但是这次似乎没有用。只有三个与史诗有关的文件,一个index.ts,一个root-epic.ts和一个包含两个史诗的史诗文件,下面显示的代码(特别是行epic.run(rootEpic);
)产生此错误:
类型'((action $:ActionsObservable,store:Store,{api,endPointKeys}:IEpicDependency)=>可观察'的参数不能分配给'Epic,Action,void,IEpicDependency>类型的参数。 参数“ store”和“ state $”的类型不兼容。 类型“ StateObservable”不可分配给“商店”类型。 类型“ StateObservable”中缺少属性“ dispatch”
任何想法如何解决?
根史诗:
import { combineEpics } from 'redux-observable';
import { fetchRefDataCountriesEpic, fetchRefDataRegionsEpic } from './epics/fetch-ref-data-epic';
export const rootEpic = combineEpics(fetchRefDataCountriesEpic, fetchRefDataRegionsEpic);
index.ts:
import 'rxjs';
import { createStore, applyMiddleware, compose} from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { routerMiddleware } from 'connected-react-router';
import { logger } from 'redux-logger';
import { api, endPointKeys } from '../services';
import { IEpicDependency } from '../models';
import { rootReducer} from './root-reducer';
import { rootEpic } from './root-epic';
import { appHistory } from '../app-history';
const dependenciesObject: IEpicDependency = { api, endPointKeys };
const epic = createEpicMiddleware({dependencies:dependenciesObject});
const middlewareList = [epic, logger, routerMiddleware(appHistory())];
const windowlfDefined = typeof window === 'undefined' ? null: window as any;
const composeEnhancers = windowlfDefined.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const middlewares = composeEnhancers( applyMiddleware(... middlewareList));
const store = createStore(rootReducer(appHistory()), middlewares);
epic.run(rootEpic);
export { store };
fetch-ref-data-epic.ts:
import { ActionsObservable, ofType } from 'redux-observable';
import { Observable, of } from 'rxjs';
import { mergeMap, map, catchError } from 'rxjs/operators';
import { Store } from 'redux';
import { IAppAction } from '../app-action';
import { IAppState } from '../state';
import { IAppError, IEpicDependency } from'../../models/misc';
import { referenceDataStateActions, fetchRefDataCountriesSuccess, fetchRefDataCountriesError, fetchRefDataRegionsError, fetchRefDataRegionsSuccess } from '../actions';
import { ICountry, IRegion } from '../../models/reference';
export const fetchRefDataCountriesEpic = (action$:
ActionsObservable<IAppAction>, store: Store<IAppState>, { api, endPointKeys
}: IEpicDependency):
Observable<IAppAction> => action$.pipe(
ofType(referenceDataStateActions.FETCH_REF_DATA_COUNTRIES),
mergeMap(() => {
return api.get(endPointKeys.url, 'sitecountry').pipe(
map((res:any) => res.data.data),
map((countries: Array<ICountry>) => fetchRefDataCountriesSuccess(countries)),
catchError(error => {
const appError: IAppError = { error, message:'Failed to retrieve countries' };
return of(fetchRefDataCountriesError(appError))
}) )}) );
export const fetchRefDataRegionsEpic = (action$:
ActionsObservable<IAppAction>, store: Store<IAppState>, { api, endPointKeys
}: IEpicDependency):
Observable<IAppAction> => action$.pipe(
ofType(referenceDataStateActions.FETCH_REF_DATA_REGIONS),
mergeMap(() => {
return api.get(endPointKeys.url, 'siteregion').pipe(
map((res:any) => res.data.data),
map((regions: Array<IRegion>) => fetchRefDataRegionsSuccess(regions)),
catchError(error => {
const appError: IAppError = { error, message:'Failed to retrieve regions' };
return of(fetchRefDataRegionsError(appError))
}) )}) );
其他代码:
import { Observable } from 'rxjs';
export interface IServiceApi {
get(apiKey: string, url: string, data?: any): Observable<any>;
post(apiKey: string, url: string, data?: any): Observable<any>;
put(apiKey: string, url: string, data?: any): Observable<any>;
export interface IEndPointKeys { url: string;}
export interface IEpicDependency { api: IServiceApi, endPointKeys: IEndPointKeys}
版本:
rxjs 6.3.3
redux-observable 1.0.0
typescript 3.1.6
redux 4.0.0
react 16.6.0
react-dom 16.6.0
react-redux 5.0.7
react-router 4.3.1
react-router-dom 4.3.1
@types/react 16.4.18
@types/react-dom 16.0.9
@types/react-redux 6.0.9