无法正确设置史诗-rxjs 6和redux-observable 1

时间:2018-11-09 18:04:49

标签: reactjs typescript redux rxjs redux-observable

我正在尝试设置史诗,我之前已经做过多次,但是这次似乎没有用。只有三个与史诗有关的文件,一个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

0 个答案:

没有答案